为什么 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;可以防止边距折叠？

【问题讨论】：

标签： html css margin

【解决方案1】：

根据这条规则，Collapsing Margins

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

...

【讨论】：