CSS折叠边距有什么意义？答案

【问题标题】：What is the point of CSS collapsing margins?CSS折叠边距有什么意义？
【发布时间】：2011-03-05 10:30:05
【问题描述】：

我觉得这很烦人，因为它是许多设计错误的根源。我希望通过了解折叠边距的目的，我将了解何时使用它们以及在不需要它们时如何避免它们。

这个功能的目的是什么？

【问题讨论】：

标签： w3c css

【解决方案1】：

“margin”的一般含义不是表示“将其移动 10px”，而是“在此元素旁边必须有 10px 的空白空间。”

我一直发现这是最容易用段落概念化的。

如果你只是给段落margin-top: 10px 并且在任何其他元素上没有边距，那么一系列段落将被很好地间隔开。但是，当然，在段落下方放置另一个元素时会遇到麻烦。两人会接触。

如果边距没有折叠，您会犹豫是否将margin-bottom: 10px 添加到您之前的代码中，因为这样任何一对段落都会间隔 20 像素，而段落与其他元素的间隔仅 10 像素。

所以垂直边距折叠。通过添加 10 像素的顶部和底部边距，您是在说，“我不在乎任何其他元素的边距规则。我要求每个段落的上方和下方至少有 10 像素的填充。”

【讨论】：

+1。同样的逻辑也适用于 CSS 之外。例如在 Microsoft Word 中，如果标题后有 12px 的边距，段落前有 6px 的边距，如果段落在标题之后，则将有 12px 的空间，而不是 18px。
对 - 他们崩溃了 - 除非他们不是同一个 dom 级别。例如。尝试折叠 this 恕我直言：这真的很烦人
您的意思是“除非它们在表格行内”。表行不是块级元素；他们有一些独特的规则。请参阅stackoverflow.com/questions/136727/… 以获得更完整的解释。
为那个元素添加margin-top怎么样？