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

【问题标题】：Why don't diametrically opposed margins overlap with a table being involved?为什么完全相反的边距不与所涉及的表格重叠？
【发布时间】：2010-02-02 21:26:22
【问题描述】：

我想知道为什么两个块元素（例如 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>

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

这是为什么呢？

【问题讨论】：

您在哪些浏览器中观察到了这种行为？我不熟悉规范，所以据我所知，这可能是一个渲染错误。

标签： html css html-table margins

【解决方案1】：

它是 box 模型 的一部分，称为 collapsing margins，w3 比我能更好地解释它

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

【讨论】：

【解决方案2】：

块级元素（Divs等）之间的合并，并总结为块级元素和内联元素。 See this for more info.

【讨论】：

表是否足够接近内联？
请注意：如果我将表格的显示属性更改为“块”，它的行为就像任何其他块元素对并且它们的边距被合并。

【解决方案3】：

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

【讨论】：

我认为 OP 明白这一点，并且想知道 为什么 那是。