塌陷宽度、高度和边缘对于块级元素意味着什么？

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，因为我在顶部框中指定了margin-bottom of 25px，在底部框中指定了margin-top of 50px。25 + 50 = 75，那么为什么空白只有50 so呢？

好吧，边距中不可能有任何内容；边距是指缺乏的内容。考虑到空白处没有显示内容，解析器认为最好将它们组合起来，以优化空间。

“倒置”这个词之所以出现，是因为从技术上讲，在同一地点存在着两种不同的利润率“段”，即“崩溃”。

请注意，这个不与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技巧和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高度。

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