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

Question

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

很多事情都会导致parent包含child的margin：

• border: solid;
• position: absolute;
• display: inline-block;
• overflow: auto;

（这只是一个小测试，毫无疑问还有更多。）

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

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

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

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

---

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

• 规范没有任何意义。
• The specs mix, without any word of explanation:
  • 'free margins'（会触及父级顶部或底部的边距不包含在父级中）和
  • 'collapsed margins'（允许相邻的边距重叠）。

演示：

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 的工作原理according to W3C:

在本规范中，表达折叠边距是指两个或多个框（可能彼此相邻或嵌套）的相邻边距（没有非空内容、填充或边界区域或间隙分隔它们）组合形成一个边距。

更具体到顶部 div 的情况：

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

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

我能做的最好的事情就是将您指向 "Collapsing Margins" on sitepoint（Tommy Olsson 和 Paul O'Brien）。他们通过示例进行了非常详细的解释，向您准确展示了您在问题示例代码中演示的行为。