折叠宽度高度和边距对于块级元素意味着什么?

Question

块级元素的宽度不能折叠，但高度可以折叠是什么意思？

您能否从 W3.org 规范中解释一下这段文字：

在 CSS 中，两个或多个框(可能是也可能不是同级(的相邻边距可以组合成一个边距。以这种方式组合的边距称为塌陷，由此产生的组合边距称为折叠边距。

崩溃这个词的含义在这里引起了很多混乱。

Answer 1

折叠边距是当两个不同元素的边距占据相同空间时为实例指定的名称。

请考虑以下示例：

.box {
height: 50px;
width: 50px;
}
.box1 {
background: red;
margin-bottom: 25px;
}
.box2 {
background: blue;
margin-top: 50px;
}

<div class="box box1"></div>
<div class="box box2"></div>

很难说，但是两个框之间的空白只是50px。您可能认为它应该75px，因为我在顶部框上指定了25pxmargin-bottom，在底部框上指定了margin-top50px。25 + 50 = 75，那么为什么空白只有50px呢？

好吧，边距中不能有任何内容;边距专门表示缺少内容。考虑到没有要在边距中显示的内容，解析器认为不妨将它们组合在一起以优化空间。

">

折叠"一词的出现是因为从技术上讲，有两个不同的边距"段"同时存在于同一个地方，彼此"崩溃"。

请注意，margin-left和margin-right不会发生这种情况：

.box {
height: 50px;
width: 50px;
float: left;
}
.box1 {
background: red;
margin-right: 25px;
}
.box2 {
background: blue;
margin-left: 50px;
}

<div class="box box1"></div>
<div class="box box2"></div>

上面的空间确实是75px.这可能是一个令人困惑的概念，但重要的是要注意它只影响垂直边距。有关折叠边距的更多信息，请访问CSS Tricks和Mozilla。

同样重要的是要注意，默认情况下，块级元素占据其父级宽度的100%，但高度的0%。

下面是一个说明这一点的示例：

.parent {
background: blue;
border: 10px solid purple;
height: 50px;
width: 200px;
}
.child {
background: red;
}

<div class="parent">
<div class="child">Text</div>
</div>

在上面的示例中，我在父项上指定了width和height，尽管我没有在子项上指定任何一项。如您所见，子元素继承200px宽度，但不继承50px高度。

希望这有助于澄清这一点！