css中常见margin塌陷问题之解决办法

css中常见margin塌陷问题之解决办法 - 小奔的早晨 - 博客园

当两个盒子在垂直方向上设置margin值时，会出现一个有趣的塌陷现象。

①垂直并列

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

.box1 {

margin-bottom:100px;

}

.box2 {

margin-top:50px;

}

---

两盒子之间的距离仅是50px，也就是说两盒子之间的margin出现了重叠部分，故而我们可以得出：垂直之间塌陷的原则是以两盒子最大的外边距为准。（跟margin-left 没有关系，只跟垂直有关系）；

---

②嵌套关系(父级元素塌陷)

.father {

}

.son {

margin-top:50px;

}

当为子盒子添加margin-top：50px;时会发生如下情况：

---

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

---

解决方法：

（1）为父盒子设置border，为外层添加border后父子盒子就不是真正意义上的贴合  （可以设置成透明：border：1px solid transparent）。

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

（3）为父盒子设定padding值；

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

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

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