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

Question

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

你能否根据 W3.org 规范解释这段文字：

In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.

崩溃这个词的意思 在这里引起了很多混淆。

Answer 1

A collapsed margin 是当两个不同元素的边距占用相同时给实例的名称 space.

考虑以下示例：

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

很难说，但两个方框之间的白色space只有50px。您可能会认为应该是 75px，因为我在顶部框指定了一个 margin-bottom of 25px，还有一个 margin-top 的 50px 在底框上。 25 + 50 = 75，为什么白色space只有50px？

嗯，边距不能有任何内容；边距特别表示缺少内容。考虑到边距没有内容可以显示，解析器认为不妨将它们组合起来优化space.

'collapsed'这个词的出现是因为在技术上有两个不同的'segments'页边距同时存在于同一个地方，'collapsing'互相影响。

请注意，不会发生在 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>

上面的space确实是75px。这可能是一个让您费解的概念，但重要的是要注意它只影响垂直边距。有关折叠边距的更多信息，请访问 CSS Tricks and Mozilla.

同样重要的是要注意，默认情况下，块级元素占据其父级 width 的 100% , 但是 0% 的 height.

这是一个说明这一点的例子：

.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 高度。

希望这有助于澄清一点！

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

What does collapsing width height and margin mean for block level elements?

css

height

margin

width

collapse