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

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

• 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>