为什么保证金不会被父元素包含?

当具有边距的元素包含在另一个元素中时,父元素不会一致地包装该边距。

许多事情会导致父母包装孩子的利润率:

  • 边界:固体;
  • 位置:绝对的;
  • 显示:内联块;
  • 溢出:汽车

(这只是从小testing,毫无疑问还有更多。)

我认为这与收缩利润率有关,但是:

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

默认为溢出的元素的逻辑是什么: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>

通常它不可见,所以对我有很大的帮助。