margin 塌陷问题

margin 塌陷问题

在标准文档流中，块级标签之间竖直方向的margin会以大的为准，这就是margin的塌陷现象。

1、 两个盒子嵌套关系

运行结果

子盒子和父盒子之间没有出现10px的间距，而是父盒子与子盒子一起与页面顶端产生了10px间隙。

解决方法：

方法一：为box1（即父盒子）添加边框

border: 1px solid #ffffff;

方法二：为box1（即父盒子）添加overflow属性

overflow: hidden;

方法一会产生 1px的边框的距离，方法二不会有影响。

解决后的效果图

2、 两个盒子垂直并列

运行结果

上面的盒子设置 margin-bottom: 50px; 下面的盒子设置 margin-top: 10px；按理说，两个盒子之间的距离应为60px，然而并不是，两盒子之间的距离仅是50px，也就是说两盒子之间的margin出现了重叠部分，故而我们可以得出：垂直之间塌陷的原则是以两盒子最大的外边距为准。这种情况下，可以设置一个外边距。