为什么不完全相反的边距与所涉及的表重叠？

Question

我想知道为什么两个块元素（例如div）之间的边距相反的边距（边缘 - 顶部之后的边缘顶部）被合并，而在块元素和表格之间，这些边距加起来。

示例：

<style>
    .a { margin-bottom: 18px; }
    .b { margin-top: 6px; }
</style>

<div class="a">Foo</div>
<div class="b">Bar</div>

...

<table class="a">...</table>
<div class="b">Bar</div>  

请注意：如果我将表格的显示属性更改为“阻止”，它的行为就像任何其他块元素一样，并且它们的边距合并。

为什么？

Answer 1

它是盒子模型的一部分，名为折叠边距，w3解释它比我更好

http://www.w3.org/TR/CSS2/box.html#collapsing-margins

Answer 2

块级元素（Div等）之间的合并，并在块级元素和内联元素中求和。 See this for more info.

Answer 3

这是因为表格的默认显示值不是block，而是显示值table。如果设置.a { display: block; }，您将看到边距确实已折叠在一起（至少在Firefox 3.6中）。