首页技术文章正文

如何解决margin“塌陷”问题？【前端面试题常问】

更新时间:2021年05月21日11时23分来源:传智教育浏览次数:

外边距塌陷共有两种情况：

第一种情况：两个同级元素，垂直排列，上面的盒子给margin-bottom，下面的盒子给margin-top，那么他们两个的间距会重叠，以大的那个计算。

解决这种情况的方法为：两个外边距不同时出现

第二种情况：两个父子元素，内部的盒子给margin-top，其父级也会受到影响，同时产生上边距，父子元素会进行粘连。

解决这种情况的方法为：父级添加一个css属性，overflow: hidden，禁止超出，外边距重叠就是margin-collapse。

解决方案：

1、为父盒子设置border，为外层添加border后父子盒子就不是真正意义上的贴合(可以设置成透明：border：1px solid ansparent);

2、为父盒子添加overflow: hidden;

3、为父盒子设定padding值;

4、为父盒子添加position: fixed;

5、为父盒子添加 display: table;

6、利用伪元素给父元素的前面添加一个空元素。

.father::before {
	content:'';
	display:table;
}

好口碑IT培训

猜你喜欢：

描述margin的重合问题，并提出你的解决方案

上一篇：textarea控件创建文本输入框 下一篇：Javascript创建对象的方式有哪些？

最新资讯