为啥 display:inline-block 可以防止边距崩溃？ [复制]

Posted 2023-03-06

【中文标题】为啥 display:inline-block 可以防止边距崩溃？ [复制]

【英文标题】：Why display:inline-block can prevent margins collapse? [duplicate]为什么 display:inline-block 可以防止边距崩溃？ [复制]

【发布时间】：2021-01-14 20:41:15

【问题描述】：

在此处显示页边距。

.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两个div之间会有一个margincollapse，它们之间的距离不是40px+40px = 80px，而是40px。

现在我在ct1或ct2中添加一个css语句display:inline-block;，它们之间的距离将变为80px，边距折叠消失。为什么display:inline-block;可以防止边距折叠？

【参考方案1】：

根据这条规则，Collapsing Margins

浮动框和任何其他框之间的边距不会折叠（即使浮动框与其流入的子级之间也不会折叠）。 建立新块格式上下文的元素（例如浮动和具有“溢出”而不是“可见”的元素）的边距不会与其流入的子级一起折叠。 inline-block 框的边距不会折叠（即使它们的流入子代也不会折叠）。

...