gpt4 book ai didi

html - 为什么显示:inline-block can prevent margins collapse?

转载 作者:行者123 更新时间:2023-12-04 15:17:13 26 4
gpt4 key购买 nike

<分区>

在此处显示边距折叠。

.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>

两个div ct1ct2 之间会出现margin collapse,它们之间的距离不是40px+40px = 80px,而是40px。

现在我在ct1ct2中添加一个css语句display:inline-block;,它们之间的距离将变为80px, margins collapse dispear。为什么 display:inline-block; 可以防止 margins collapse ?

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com