CSS中外边距塌陷问题及其解决方法

本文总阅读量次

外边距塌陷（又叫外边距合并、外边距折叠），是指当两个块元素彼此接触时，它们的间距将取两个相邻外边界的最大值，而非两者的总和。

会发生外边距折叠的三种基本情况：
1.相邻元素之间
2.父元素与其第一个或最后一个子元素之间
3.空的块级元素

关于外边距塌陷，MDN上有更详细的说明，可供参考
MDN-外边距合并

这里我们用一个相邻元素做示例：

Example

1
2
3
4
5
// HTML代码
<div class="back">
    <div class="one">1</div>
    <div class="two">2</div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// CSS代码
.back {
    height: 400px;
    width: 400px;
    background: #fedeae;
}
.one {
    height: 100px;
    width: 100px;
    background: pink;
    margin-bottom: 50px;
}
.two {
    height: 100px;
    width: 100px;
    background: skyblue;
    margin-top: 50px;
}

可以看到，块元素1和2之间原本应该有100px的外间距，但实际结果是只有50px（由于两个margin间距值均为50px，所以取最大值就是50px了，如果一个为50px，一个为100px，则取最大值100px。）

知道问题后，就需要解决问题了，相邻元素之间margin塌陷问题的解决方法：

方法一：给靠后的快元素添加float：left/right

（或给靠后的快元素添加position：absolute/fixed）

float：定义元素在哪个方向浮动。
absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。

方法二：给靠后的块元素添加display：inline-block

（IE6和IE7下不完全支持display:inline-block，所以如果要兼容IE6、IE7要加上*display:inline;zoom:1）
（注：以上两种方法同样适用于解决父子块元素之间的margin塌陷问题）

另外，如果是父子元素之间的margin塌陷，还可以尝试使用以下方式解决：

方法一：给父元素设置一个border

方法二：给父元素添加overflow：hidden

方法三：给父元素设定padding值

至于，空块级元素的外边距塌陷，情况要更复杂一些，而且实际应用的地方很少。以一个有背景色的块元素为参照，可以看出空块元素的外边距塌陷也是取top与bottom的最大值，但空块元素内的空间分布要更复杂一些。感兴趣的小伙伴可以自己再实践一下~

（END）