为什么父元素不包含边距？

Question

当具有边距的元素包含在另一个元素中时，父元素不会始终包裹/包含该边距。

很多事情都会导致父级包含子级的边距：

• border:solid;
• position:absolute;
• display: inline-block;
• 溢出：自动；

（这只是来自一点测试，毫无疑问还有更多。）

我认为这与折叠边距有关，但是：

1. W3C 规范页面没有对此类行为的描述。
2. 这里没有重叠的边距。
3. 所有浏览器在这个问题上的行为似乎都是一致的。
4. 该行为受到与边距无关的触发器的影响。

默认为 overflow: auto 的元素应包含与溢出设置为 auto 的元素不同的材料，其逻辑是什么？

为什么除了常规 div 的默认行为之外的所有内容都应该假设边距由父级包含 - 以及为什么常规默认值不应该包含边距？

---

编辑：最终的答案是 W3C 确实指定了这种行为，但是：

• 这些规范实际上没有任何意义。
• 规格混合，没有任何解释：
  • “自由边距”（父级不包含触及父级顶部或底部的边距）和
  • “折叠边距”（相邻边距允许重叠）。

演示：

body {
  margin: 0;
}

div.block {
  background-color: skyblue;
}
div.inline-block {
  display: inline-block;
  background-color: lawngreen;
}
div.position-absolute {
  background-color: rgba(255,255,0,.7);
  position: absolute;
  bottom: 0;
  right: 0;
}
div.overflow-auto {
  background-color: hotpink;
  overflow: auto;
}
div.border {
  background-color: aquamarine;
  border: solid;
}

h2 {
  margin: 80px;
  width: 250px;
  border: solid;
}

<div class="block">
  <h2>Is the margin contained (block)?</h2>
</div>
<div class="inline-block">
  <h2>Is the margin contained (inline-block)?</h2>
</div>
<div class="position-absolute">
  <h2>Is the margin contained (position-absolute)?</h2>
</div>
<div class="overflow-auto">
  <h2>Is the margin contained (overflow-auto)?</h2>
</div>
<div class="border">
  <h2>Is the margin contained (border)?</h2>
</div>

Answer 1

这是 CSS 的工作方式根据 W3C：

在本规范中，“折叠边距”一词是指两个或多个框（可以彼此相邻或嵌套）的相邻边距（没有非空内容、填充或边框区域或间隙将它们分开）组合在一起形成单一边距。

更具体地说，您的顶部 div 的情况：

如果框的顶部和底部边距相邻，则边距可能会折叠穿过它。在这种情况下，元素的位置取决于它与其他边距被折叠的元素的关系。

• 如果元素的边距与其父级的上边距折叠在一起，则框的上边框边缘将定义为与父级的相同。
• 否则，要么该元素的父元素不参与边距折叠，要么只涉及父元素的下边距。元素顶部边框边缘的位置与元素具有非零底部边框时的位置相同。

我能做的最好的事情就是向您指出 sitepoint 上的“折叠边距”< /a> （汤米·奥尔森和保罗·奥布莱恩）。他们用示例进行非常详细的解释，向您展示您在问题示例代码中演示的行为。