为何display:inline-block可防止外边距重叠？附示例验证

先来看你给出的外边距重叠示例代码：

.ct1{ background: red; margin:40px; border:1px solid;width:100%; }
.ct2{ background: pink; margin:40px; border:1px solid;width:100%; }

<div class="ctbox">
<div class="ct1">first</div>
<div class="ct2">second</div>
</div>

正如你所说，这段代码里.ct1和.ct2这两个块级元素会发生外边距重叠——它们之间的垂直间距不是40px + 40px = 80px，而是只有40px。但只要给其中任意一个元素加上display:inline-block;，重叠就会消失，间距变成预期的80px。

这背后的核心原因要从CSS的块级元素外边距重叠规则说起：

• 外边距重叠（Margin Collapsing）是CSS中专门针对**块级盒（Block-level boxes）**的规则，只有当两个元素都是块级盒，且处于同一个块级格式化上下文（Block Formatting Context, BFC）中，同时没有其他元素（比如边框、内边距、清除浮动等）分隔它们的外边距时，才会发生垂直方向的外边距重叠。
• 而display:inline-block会把元素变成行内块级盒（Inline-block boxes），它不属于纯块级盒的范畴，自然就不触发块级元素的外边距重叠规则。
• 另外，行内块元素的布局逻辑更贴近行内元素：它们的外边距不会像块级元素那样合并，而是会像行内元素的水平间距一样，直接累加计算。

简单来说，就是inline-block改变了元素的盒类型，跳出了块级元素的外边距重叠规则范围，所以两个元素的外边距就会正常相加，不会再重叠了。

内容的提问来源于stack exchange，提问作者showkey