css - 折叠的高度和边距对于块级元素意味着什么？

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

您能否从W3.org规范中解释此文本：


  在CSS中，两个或多个框（可能是也可能不是兄弟）的相邻边距可以合并形成一个边距。据说以这种方式组合的边距已塌陷，所得的合并边距称为塌陷边距。


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

最佳答案

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

考虑以下示例：

.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，因为我在顶部的框中指定了margin-bottom的25px，在底部的框中​​指定了margin-top的50px。 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高度。

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