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

Question

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

许多事情将导致父母控制孩子的保证金：

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

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

我认为这与利润下降有关，但是：

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

根据逻辑，默认元素overflow: 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案例：

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

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

我能做的最好的事情是指向您指向站点上的“崩溃边际”（TommyOlsson和Paul O’Brien） 。他们用示例进行了 非常 详细的说明，这些示例向您精确显示了在示例示例代码中演示的行为。