摘要：发生外边距折叠的条件是什么垂直方向上相邻的两个元素这种情况很好理解，就是上面的例子中给出的情况。外边距折叠后的大小两个相同大小的正数取某个外边距的值。即与发生折叠，折叠后的值为。根据块级格式化上下文来阻止外边距折叠。
什么是外边距折叠
准确来说，外边距折叠应该叫垂直外边距折叠，因为只会发生在垂直方向上，而水平方向上不会发生。
对于以下简单的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
然而实际情况是:
这就是（垂直）外边距折叠。
发生外边距折叠的条件是什么外边距折叠的定义：
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从不折叠。
1.（垂直方向上）相邻的两个元素
这种情况很好理解，就是上面的例子中给出的情况。这里要注意一点，所谓相邻指的是渲染之后的元素位置相邻，而不是dom结构上的相邻，也就是说如果将代码：
改成
虽然加了一层div包裹，但是仍然会发生外边距折叠。
2.父元素和第一个／最后一个子元素之间
考虑以下代码：
.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。
外边距折叠后的大小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，但是实际情况如下：
发现竟然是54px，那么多出来的4px是哪来的？该如何处理掉多余的4px？这里先不做解释，留个坑，在另一篇文章《inline-block产生的看不见的空间》里解释。至于如何处理，只需要在container上加上font-size: 0;即可,就会得到我们想要的50px。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/116665.html
摘要：这个例子就是外边距折叠块级元素的上外边距和下外边距有时会合并或折叠为一个外边距。 外边距折叠指的是毗邻的两个或多个外边距 (margin) 会合并成一个外边距，本文详细的介绍了一下css外边距折叠的实现，分为3种情况，非常具有实用价值，需要的朋友可以参考下 前文 这是的一个经典的老问题，因为之前刚好有读者朋友问到，顺便整理一下。 从一个简单例子说起 先看一个简单示例： `` `.sli...
摘要：这个例子就是外边距折叠块级元素的上外边距和下外边距有时会合并或折叠为一个外边距。 外边距折叠指的是毗邻的两个或多个外边距 (margin) 会合并成一个外边距，本文详细的介绍了一下css外边距折叠的实现，分为3种情况，非常具有实用价值，需要的朋友可以参考下 前文 这是的一个经典的老问题，因为之前刚好有读者朋友问到，顺便整理一下。 从一个简单例子说起 先看一个简单示例： `` `.sli...
摘要：这个例子就是外边距折叠块级元素的上外边距和下外边距有时会合并或折叠为一个外边距。 外边距折叠指的是毗邻的两个或多个外边距 (margin) 会合并成一个外边距，本文详细的介绍了一下css外边距折叠的实现，分为3种情况，非常具有实用价值，需要的朋友可以参考下 前文 这是的一个经典的老问题，因为之前刚好有读者朋友问到，顺便整理一下。 从一个简单例子说起 先看一个简单示例： `` `.sli...
摘要：我们可以注意定义中的几个关键字毗邻两个或多个垂直方向和普通流。如何避免外边距叠加上面讲了外边距的叠加，那如何避免呢，其实只要破坏上面讲到的四个条件中的任何一个即可毗邻两个或多个普通流和垂直方向。 外边距叠加一直是前端开发必须了解的一个概念，面试一般也会问到这个问题。所以整理一下相关外边距叠加相关的知识点。外边距叠加是什么？什么时候会发生外边距叠加？如何避免外边距叠加？ 什么是外边距叠加...
阅读 3471·2021-10-12 10:11
阅读 3505·2021-09-13 10:27
阅读 2386·2019-08-30 15:53
阅读 1838·2019-08-29 18:33
阅读 2082·2019-08-29 14:03
阅读 832·2019-08-29 13:27
阅读 3182·2019-08-28 18:07
阅读 657·2019-08-26 13:23
