为啥父元素不包含边距？

Posted 2023-03-06

【中文标题】为啥父元素不包含边距？

【英文标题】：Why would margin not be contained by parent element?为什么父元素不包含边距？

【发布时间】：2011-01-11 16:51:00

【问题描述】：

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

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

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

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

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

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

默认为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>

【问题讨论】：

我不明白你在问什么。您是在问为什么 h1 元素会显示在容器元素中吗？请更清楚您的问题。

【参考方案1】：

这就是 CSS 的工作原理according to W3C:

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

更具体到顶部 div 的情况：

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

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

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

【讨论】：

根据那篇文章，看到的行为是不正确的。 关于您的回答：“折叠边距意味着相邻边距...合并”。由于此处没有相邻的边距，因此这不能是折叠边距。具体来说，“如果元素的边距与其父级的上边距折叠在一起” - 不能，因为父级没有上边距。在这个问题中，我处理崩溃的边距。但是，无论哪种情况，这都不能解释为什么当显示为内联块或溢出设置为自动（与默认值相同）时行为应该改变。

更正：在那篇文章中，它列出了我的一些触发器和其他触发器。正如这些触发器可以防止重叠边距折叠一样，它们也可以防止常规边距折叠。两个问题：1）这种行为有什么意义？ 2) 为什么它认为我的边距重叠？

@samgoody - 1) 我同意这没有多大意义，除非您来自印刷背景，这主要是编写规范时的网络。请参阅此处以获取该视图：@ 987654323@ 2）在您的情况下，这是父/子的事情...父/子的折叠给div.b 100px 的垂直边距，这就是为什么背景为白色而不是绿色的原因。我认为问题在于规范不清楚在这种情况下 WHICH 保证金在这种情况下会在崩溃中获胜，似乎在当前浏览器中，父级得到了它。