CSS Margin塌陷（重叠）

1、什么是“ Margin塌陷（重叠） ”？

在标准文档流中，竖直方向（是竖直方向，水平方向的不会出现塌陷现象）的margin会出现叠加现象，即较大的margin会覆盖掉较小的margin，竖直方向的两个盒子中间只有一个较大的margin，这就是margin的塌陷现象。

2、Margin塌陷现象何时产生？

margin的塌陷现象分两种情况：1，兄弟关系的盒子 2 ，父子关系的盒子

注：两个盒子的垂直外边距完全接触才会触发。

3、现象实例

（1）兄弟关系盒子垂直并列（少见）

两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。

两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。

两个外边距一正一负时，折叠结果是两者的相加的和。

step1：首先设置两个DIV,并为其制定宽高

step2：对box1我们为其设置margin-bottom：50px;

　　 　 对box2我们为其设置margin-top： 20px;

两盒子之间的距离仅是50px，两盒子之间的margin出现了重叠部分，故而我们可以得出：垂直之间塌陷的原则是以两盒子最大的外边距为准。

（2）父子关系盒子（常见）

step1：首先设置两个嵌套关系的DIV,并为其制定宽高

step2: 当为内层盒子添加margin-top:10px时，会出现

子盒子和父盒子之间并没出现期望的10px间隙而是父盒子与子盒子一起与页面顶端产生了10px间隙（即父级盒子往下塌陷了10px）。

即无论给子元素设不设置margin-top值，其都不发生作用，都会作用于父元素身上

4、解决方法

（1）为父盒子设置border，为外层添加border后父子盒子就不是真正意义上的贴合；

（2）为父盒子设定padding值，抵消掉子元素设置margin值的方式；

（3）为父盒子添加overflow：hidden；

（4）为父盒子添加position：fixed；

（5）为父盒子添加 display：table；

（6）利用伪元素给子元素的前面添加一个空元素。