为什么 <table> 的边距不会与相邻的 <p> 一起折叠？答案

【问题标题】：Why doesn't a <table>'s margin collapse with an adjacent <p>?为什么 <table> 的边距不会与相邻的 <p> 一起折叠？
【发布时间】：2023-03-28 03:43:01
【问题描述】：

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

【问题讨论】：

标签： html css

【解决方案1】：

边距折叠仅针对块元素定义。试试吧 - 将display: block 添加到表格样式中，突然它就可以工作了（并改变了表格的显示......）

桌子很特别。在 CSS 规范中，它们不是相当块元素 - 特殊规则适用于它们的子元素（显然）和 table 元素本身的大小和位置。

【讨论】：

啊！你是对的——添加 display:block 解决了这个问题。但是，它重新打开了这个：stackoverflow.com/questions/129651/… 是否有可能有一个表格（1）折叠边距并且（2）不展开以占用所有可用宽度？
据我所知，没有。只有普通的块元素会允许它们的边距折叠，并且为块级元素计算宽度 + 填充 + 边框 + 边距，这样得到的总和就是包含块的宽度。不过，您可以将表格放在带有边距的块内... ;-)
我检查了这个。表按预期工作，没有“显示：块”

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

'display' 属性的几个值使元素成为块级：'block'、'list-item' 和 'run-in'（部分时间；参见 run-in 框）和 'table '。

我这么说是因为规范对collapsing margins...进行了以下说明...

正常流折叠中块框的两个或多个相邻垂直边距。

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

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

块级元素（除了 display 'table' 元素，将在后面的章节中介绍）生成主体块框...主体块框参与块格式化上下文。

然后，在Block Formatting Context 部分：

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

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

【讨论】：

感谢您指出这一点。我还认为这会与规范相矛盾。我不再感谢您的解释 :-) --- 啊，很抱歉那个带外评论。我相信 SO 规则不认可“谢谢 cmets”。不会再发生了！
从 2018 年开始，您最初的理解似乎是正确的，从那时起所有浏览器都修复了该 错误。 display: table 元素生成两个框而不是一个，表格包装盒和表格盒本身，但前者确实参与块格式化上下文，因此为该元素设置的垂直边距会与其兄弟边距一起折叠。

【解决方案4】：

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

【讨论】：

奇怪的是，如果我将表格设置为“显示：块”，它会突然折叠边距。

相关规范：