CSS 中引入边距折叠规则的原因是啥？

Posted 2023-03-24

【中文标题】CSS 中引入边距折叠规则的原因是啥？

【英文标题】：For what reason margin collapse rules were introduced in CSS?CSS 中引入边距折叠规则的原因是什么？

【发布时间】：2010-11-29 02:46:29

【问题描述】：

只是无法弄清楚这套巧妙的规则在什么情况下会有所帮助。当您将不同的布局组合在一起时，它们打破了盒子模型的简单性并提供了无限的麻烦来源。那么是什么原因呢？

Rules 供参考。

更新：规则对于兄弟元素来说是非常合乎逻辑的，但是为什么边距应该传播到父元素直到树？解决了什么样的问题？

例如：

<div style="margin: 20px; background-color: red;">
    <div style="margin: 20px;">
        <p style="margin: 100px;">red</p>
    </div>
</div>
<div style="margin: 20px; background-color: blue;">blue</div>

*** div 彼此间隔 100 像素。

【参考方案1】：

在您意识到替代方案没有意义之前，这是没有真正意义的情况之一。

您可能知道，边距指定元素之间的距离，它不是围绕每个元素的“外部填充”。如果两个边距为 20px 的元素相邻，则它们之间的距离是 20px，而不是 40px。

由于边距是到另一个元素的距离，因此距离是从元素到周围元素的距离，而不是到父元素的边界。

如果将边距计算到父元素的边界，将元素放入div 元素会在元素之间引入额外的间距，即使div 本身没有边距或填充。如果您在元素周围添加无样式的div，则元素周围的边距应该保持不变。

【讨论】：

实际上，我更喜欢它的清晰性。虽然我同意在某些情况下边距崩溃会有所帮助。

这对于兄弟元素来说是非常合乎逻辑的。但我仍然不明白为什么子元素的边距会影响父元素的边距。

@actual：无论周围元素如何，子元素和父元素边界之间的间距必须相同。周围元素不能在父元素和子元素的边界之间引入间距，因为这可能会改变父元素的大小，因此边距也必须将父元素推开，而不仅仅是子元素。

@Magne：是的。这就是为什么折叠边距有点令人困惑。它只影响无样式 div 的大小，无论有无无样式父元素，子元素之间的间距相同。如果您有两个彼此相邻的无样式 div，且子元素具有边距，您就会明白为什么父元素不能占用子元素的边距空间，因为这样父元素将不得不重叠。

我无法让自己认为当前折叠边距的行为是一种合乎逻辑的行为，所以就我而言，顶部的元素是否有边距，元素上是否有边距下面，这些边距合并为一个边距，即忽略其中一个边距。我知道你在说什么，它是正确的，我只是不同意折叠边距的行为。就像我说的，这听起来像是 Microsoft Word 会做的事情，而不是 W3C。

【参考方案2】：

什么时候有用？

最简单的例子：段落和标题的列表，每个都有margin-top 和margin-bottom。您希望文章的顶部和底部以及不同元素之间有一个边距。

使用边距折叠，您无需在第一项或最后一项上设置特殊边距（不是原始 CSS 规范的一部分！）或填充容器。

但我同意，总的来说，这是一个毫无意义的功能。

【参考方案3】：

考虑包含多个段落的正文。您希望每个段落以 2em 分隔，并且您希望第一段与前面的内容分隔 2em，最后一段与后面的内容分隔 2em。

这很容易用下面的 CSS 实现，因为分隔段落的顶部和底部边距会折叠：

p 
    margin-top: 2em
    margin-bottom: 2em;

如果边距没有折叠，这将导致边距被 4em 的空间分隔，而不是 2em。如果没有边距折叠，达到预期效果的唯一方法是为第一段和最后一段设置一些额外的规则，这将涉及给它们一个类或 id（如果文本被更改，则必须保持） ，或者将它们包装在一个不必要的额外元素中并使用 :first-child 和 :last-child ，或者......好吧，你明白了。

我可以保证，如果没有发生边距折叠，SO 会有很多重复的问题，要求解决方法以实现上述规则提供的一致间距:-)

【讨论】：

实际上，你可以通过简单地确保前面的内容和后面的内容有一个边距来解决这个问题。这样你就可以避免给第一段或最后一段赋予一个类/id和一个特殊的边距.

在我看来，在这种情况下不崩溃将是天真的期望。打破 PoLS 给我。此外，对于折叠的边距，您无法“取消折叠”，而添加一点标记来处理您的情况很容易，即使它可能会重复。