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

Why would margin not be contained by parent element?

提问by SamGoody

When an element with a margin is contained within another element, the parent does not consistently wrap/contain that margin.

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

Many things will cause the parent to contain the child's margin:

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

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

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

(And this is just from a little testing, no doubt there are more.)

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

I would assume this has to do with collapsing margins, but:

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

1. The W3C spec page has no description of such behavior.
2. There are no overlapping margins here.
3. Behavior of all browsers seems to be consistent on this issue.
4. The behavior is affected by triggers that are not related to the margins.

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

What is the logic by which an element which defaults to overflow: autoshould contain different material than the one where the overflow is set to auto?

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

Why should everything but the default behavior of a regular div assume that the margin is contained by the parent – and why should the regular default not include the margin?

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

---

---

EDIT:The final answer is that the W3C really does specify this behavior, but that:

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

• The specs do not really make any sense.
• The specs mix, without any word of explanation:
  • 'free margins' (margins that would touch the top or bottom of their parent are not contained by the parent) and
  • 'collapsed margins' (adjacent margins are allowed to overlap).

• 规格没有任何意义。
• 规格混合，没有任何解释：
  • “自由边距”（会触及其父项顶部或底部的边距不包含在父项中）和
  • “折叠边距”（允许相邻边距重叠）。

Demo:

演示：

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>

采纳答案by Nick Craver

This is how CSS works according to W3C:

根据 W3C，CSS 是这样工作的：

In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding, or border areas, or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.

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

More specific to your case of the top div:

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

If the top and bottom margins of a box are adjoining, then it is possible for margins to collapse through it. In this case, the position of the element depends on its relationship with the other elements whose margins are being collapsed.

• If the element's margins are collapsed with its parent's top margin, the top border edge of the box is defined to be the same as the parent's.
• Otherwise, either the element's parent is not taking part in the margin collapsing, or only the parent's bottom margin is involved. The position of the element's top border edge is the same as it would have been if the element had a non-zero bottom border.

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

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

The best thing I can do is point you to on "Collapsing Margins" on sitepoint(by Tommy Olsson and Paul O'Brien). They do a verydetailed explanation with examples showing you exactly the behaviors you demoed in the question example code.

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