出于什么原因在CSS中引入了保证金折叠规则？

StackOverflow https://stackoverflow.com/questions/1438114

  •  08-07-2019
  •  | 
  •  

题

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

规则供参考。

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

例如：

<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相互间隔100px。

有帮助吗？

解决方案

这是其中一种情况，直到你意识到替代方案不那么有意义它才真正有意义。

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

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

如果边距将计入父元素的边界，则将元素放在 div 元素中会在元素之间引入额外的间距，尽管 div 本身没有保证金或填充。如果在其周围添加无样式的 div ，则元素周围的边距应保持不变。

其他提示

什么时候有帮助？

最简单的示例：段落和标题列表，每个段落和标题都带有 margin-top 和 margin-bottom 。您需要在文章的顶部和底部以及不同元素之间留出边距。

如果边距折叠，您可以不在第一个或最后一个项目上设置特殊边距（不是原始CSS规范的一部分！）或填充容器。

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

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

使用以下CSS很容易实现，因为分隔段落的顶部和底部边距将会崩溃：

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

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

我可以保证，如果没有发生保证金崩溃，那么SO会有很多重复的问题要求解决方法以达到上述规则提供的一致间距： - ）

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top