如何理解HTML外边距折叠,深入CSS之外边距折叠(margin collapse)详解

什么是外边距折叠

准确来说，外边距折叠应该叫垂直外边距折叠，因为只会发生在垂直方向上，而水平方向上不会发生。

对于以下简单的html代码和css代码， 请问top块和bottom块之间的垂直间距是多少px?

.block {

width: 100px;

height: 100px;

background-color: lightgray;

}

.top {

margin-bottom: 20px;

}

.bottom {

margin-top: 30px;

}

如果你不了解外边距折叠，那么你会认为：

间距 = top块的margin-bottom + bottom块的margin-top

＝20px + 30px = 50px

然而实际情况是:

image.png

image.png

这就是(垂直)外边距折叠。

外边距折叠的定义：

The top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the individual margins (or just one of them, if they are equal), a behavior known as margin collapsing. Note that the margins of floating and absolutely positioned elements never collapse.

翻译过来就是：

块级元素的上下外边距(margin)在某些情况下会合并(折叠)起来，合并之后的大小为较大的margin。注意浮动和绝对定位的元素的margin从不折叠。

发生外边距折叠的条件是什么

(垂直方向上)相邻的两个元素

这种情况很好理解，就是上面的例子中给出的情况。这里要注意一点，所谓相邻指的是渲染之后的元素位置相邻，而不是dom结构上的相邻，也就是说如果将代码：

改成

虽然加了一层div包裹，但是仍然会发生外边距折叠。

父元素和第一个／最后一个子元素之间

考虑以下代码：

.parent {

margin-top: 30px;

}

.child {

margin-top: 20px;

width: 50px;

height: 50px;

background-color: lightgray;

}

parent块有margin-top: 30px;child块有margin-top: 20px;，那么第一个子元素距离最上面的距离是50px吗？不是，由于有外边距折叠的存在，折叠后的距离为30px。

image.png

image.png

外边距折叠后的大小

1.两个相同大小的正数：取某个外边距的值。即30px与30px发生折叠，折叠后的值为30px。

2.两个不同大小的正数：取较大的外边距的值。即30px与20px发生折叠，折叠后的值为30px。

3.一正一负：取正数与负数的和。即30px与-20px发生折叠，折叠后的值为10px。

4.相同大小的负数：同相同大小正数。-30px与-30px折叠，折叠后为-30px。

5.不同大小负数： 取绝对值较大的负数。-30px与-20px折叠，折叠后为-30px。

如果我希望不发生外边距折叠，该怎么做

1.曲线救国，如果你希望垂直方向上两个块间距为50px，可以通过设置上方块margin-bottom: 50px;而非采用30px + 20px;来实现。

2.根据BFC(block formatting context)块级格式化上下文来阻止外边距折叠。你可以试着将本文给出的第一个例子中的top块设置：display: inline-block;来形成BFC。这样就不会再发生外边距折叠了。我在实验中发现，在设置了display:inline-block之后，期望的间距为50px，但是实际情况如下：

image.png

image.png

发现竟然是54px，那么多出来的4px是哪来的？该如何处理掉多余的4px？这里先不做解释，留个坑，在另一篇文章《inline-block产生的看不见的空间》里解释。至于如何处理，只需要在container上加上font-size: 0;即可,就会得到我们想要的50px。