根据我对CSS规范的理解，段落上方或者下方的表格应在其中折叠垂直边距。但是，这不是在这里发生：

table {
  margin: 100px;
  border: solid red 2px;
}
p {
  margin: 100px
}

<table>
  <tr>
    <td>
      This is a one-celled table with 100px margin all around.
    </td>
  </tr>
</table>

<p>This is a paragraph with 100px margin all around.</p>

我以为两个元素之间会有100px，但是有200px-边距不会崩溃。

为什么不？

编辑：这似乎是表的错：如果我复制表并复制段落，则两个段落将折叠边距。这两个表不会。而且，如上所述，表格不会用段落折叠边距。这是合规的行为吗？

table {
  margin: 100px;
  border: solid red 2px;
}

<table>
  <tr>
    <td>
      This is a one-celled table with 100px margin all around.
    </td>
  </tr>
</table>
<table>
  <tr>
    <td>
      This is a one-celled table with 100px margin all around.
    </td>
  </tr>
</table>

p {
  margin: 100px
}

<p>This is a paragraph with 100px margin all around.</p>
<p>This is a paragraph with 100px margin all around.</p>

解决方案

我认为这取决于CSS的不同浏览器实现。我刚刚尝试了代码，Firefox3不会折叠垂直边距，但IE7和Safari3.1.2可以。

我的理解是，垂直边距仅在表格和标题之间折叠[1]。否则，表的行为应与其他任何块元素[2]相同(即2个元素之间的空白均具有100px的边距= 200px)。

• http://www.w3.org/TR/CSS2/tables.html#q5
• http://www.w3.org/TR/CSS2/box.html

边距折叠仅针对块元素定义。尝试在表样式中添加" display：block"，然后突然起作用(并改变表的显示...)

桌子很特别。在CSS规范中，它们不是完全块元素，特殊规则适用于大小和位置，包括其子元素(显然)和table元素本身。

相关规格：

http://www.w3.org/TR/CSS21/box.html#collapsing-margins
http://www.w3.org/TR/CSS21/visuren.html#block-box

我最初以为Firefox 3不符合CSS规范的这一部分：

Several values of the 'display' property make an element block-level: 'block','list-item', and 'run-in' (part of the time; see run-in boxes), and 'table'.

我之所以这样说是因为规范说明了以下有关利润下降的信息...

Two or more adjoining vertical margins of block boxes in the normal flow collapse.

...并将表格样式设置为" display：block"会使边距按期望折叠，然后将其重新设置为" display：table`会再次撤消折叠。

但是再看一遍，规范也说了这一点(强调我的意思)：

Block-level elements (except for display 'table' elements, which are described in a later chapter) generate a principal block box... Principal block boxes participate in a block formatting context.

然后，在"块格式设置上下文"部分中：

Vertical margins between adjacent block boxes in a block formatting context collapse.

阅读该书使我认为表(不参与块格式化上下文)和段落(确实参与)之间的边距不应折叠是正确的。