为什么保证金不会被父元素包含？
当具有边距的元素包含在另一个元素中时，父元素不会一致地包装该边距。
许多事情会导致父母包装孩子的利润率：
- 边界：固体;
- 位置：绝对的;
- 显示：内联块;
- 溢出：汽车
（这只是从小testing，毫无疑问还有更多。）
我认为这与收缩利润率有关，但是：
- W3C规范页面没有这种行为的描述。
- 这里没有重叠的边距。
- 所有浏览器的行为似乎在这个问题上是一致的。
- 行为受到与边距无关的触发器的影响
默认为溢出的元素的逻辑是什么：auto应该包含与溢出设置为auto的元素不同的材料。
为什么除了常规div的默认行为之外，其他所有的东西都假定margin是由父级包含的 – 为什么常规默认不包含margin呢？
编辑：最后的答案是W3C确实指定了这种行为，但是
- 规格没有任何意义。
- 规格组合，没有任何解释的话 ：
- “免费利润率”（可能触及其父母的顶部或底部的利润率不包含在父母中）以及
- “折叠边距”（相邻的边距允许重叠）。
演示：
<!doctype html> <html> <head> <title>Margins overextending themselves</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > <style type="text/css"> body{ margin:0; } div.b{ background-color:green; } div.ib{ display:inline-block; background-color:red; } div.pa{ background-color:yellow; position:absolute; bottom:0; right:0; } div.oa{ background-color:magenta; overflow:auto; } div.brdr{ background-color:pink; border:solid; } h1{margin:100px; width:250px; border:solid;} </style> </head> <body> <div class="b"> <h1>Is the margin contained?</h1> </div> <div class="ib"> <h1>Is the margin contained?</h1> </div> <div class="pa"> <h1>Is the margin contained?</h1> </div> <div class="oa"> <h1>Is the margin contained?</h1> </div> <div class="brdr"> <h1>Is the margin contained?</h1> </div> </body> </html>` 根据W3C， CSS是如何工作的：
在本说明书中，expression式的折叠边界意味着两个或多个盒子（可以彼此相邻或嵌套）的相邻边界（没有非空内容，填充或边界区域或清除它们）将形成单一保证金
更具体到您的案例顶部的div：
如果一个盒子的顶部和底部边缘相邻，则边缘可能通过它折叠。 在这种情况下，元素的位置取决于其与边缘被折叠的其他元素的关系。
- 如果该元素的边距与父级的顶边距合并，则该顶级边框的边框被定义为与父级相同。
- 否则，元素的父代不参与边缘折叠，或只涉及父代的底部边距。 元素上边框的位置与元素底边非零时的位置相同。
我能做的最好的事情就是在站点上 通过Tommy Olsson和Paul O'Brien的 “Collapsing Margins” 。 他们做了一个非常详细的解释，并用实例向您展示了您在问题示例代码中演示的行为。
像热修复尝试在第一个元素（在父元素<div> ）之前添加<hr> 。
通常它不可见，所以对我有很大的帮助。
