为什么<table>的边距不会与相邻的<p>崩溃？

Question

根据我对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>

Answer 1

边距折叠仅针对块元素定义.试试吧 - 添加display: block到表格样式,突然它起作用(并改变表格的显示......)

表很特别.在CSS规范,他们不是很块元素-特殊的规则适用于大小和位置,无论是自己的孩子(显然),而的table元素本身.

相关规格:

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