55

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

许多事情会导致父母包含孩子的边距：

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

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

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

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

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

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

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

  • 这些规格实际上没有任何意义。
  • 规格混合，没有任何解释：
    • '自由边距'（会触及其父级顶部或底部的边距不包含在父级中）和
    • '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>

4

1 回答 1

30

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

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

更具体到您的顶级 div 的情况：

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

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

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

于 2010-02-01T12:37:42.393 回答