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

Posted 2023-03-24

【中文标题】折叠宽度高度和边距对于块级元素意味着啥？

【英文标题】：What does collapsing width height and margin mean for block level elements?折叠宽度高度和边距对于块级元素意味着什么？

【发布时间】：2018-01-24 01:46:13

【问题描述】：

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

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

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

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

【问题讨论】：

请参考您在上面获得这些 qoutes 的链接

【参考方案1】：

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？

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

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

请注意，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 的高度。

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

【讨论】：

感谢您的解释。能否请您详细说明相邻的保证金案例。

哦等等！一开始我完全误解了这一点。我很抱歉;我现在将更新我的答案以更正此问题 =]

我现在已经大幅修改了我的答案以更好地涵盖这个=]

非常感谢，它拯救了我的一天。