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

Answer 2

我认为这取决于CSS的不同浏览器实现。我刚试过你的代码，Firefox3不会崩溃垂直边距，但是IE7和Safari3.1.2都可以。

Answer 3

我原本以为Firefox 3不尊重this part of the CSS specification：

'display'属性的几个值构成一个元素块级：'block'，'list-item'和'run-in'（部分时间;参见run-in box）和'table ”。

我之所以这么说，是因为该规范说明了以下collapsing margins ...

正常流量崩溃时两个或多个相邻的块状框的垂直边距。

...并将表格的样式设置为display: block会使边距按预期折叠，并将其重新设置为display: table以撤消折叠。

但再看一遍，the spec also says this（强调我的）：

块级元素（除了显示'table'元素，在后面的章节中描述）生成一个主块框...主块框参与块格式化上下文。 / p>

然后，在Block Formatting Context部分：

块格式化上下文中相邻块框之间的垂直边距折叠。

阅读使我认为表格（不参与块格式化上下文）和段落（确实如此）之间的边距不应该崩溃是正确的。

Answer 4

我的理解是垂直边距只会在表格和标题之间折叠[1]。否则，表应该表现为任何其他块元素[2]（即2个元素，其中100px边距= 200px）。

为什么没有邻近的<p>？</p> <table> </table>的边距会崩溃

4 个答案:

相关规格：