这套巧妙的规则什么时候能派上用场呢？它们打破了盒子模型的简单性，当你把不同的布局片段组合在一起时，它们提供了无限的麻烦来源。那么原因是什么呢？
规则供参考。
更新：规则对于兄弟元素是很合理的，但是为什么边距应该传播到父元素直到树？这解决了什么样的问题？
例如：
<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。
3条答案
按热度按时间gab6jxml1#
在这种情况下，除非你意识到其他选择没有什么意义，否则它就没有什么意义。
正如你可能知道的，边距指定元素之间的距离，它不是围绕每个元素的“外部填充”。如果两个边距为20px的元素相邻，它们之间的距离是20px，而不是40px。
因为边距是到另一个元素的距离，所以该距离是从元素到周围元素的距离，而不是到父元素边界的距离。
如果边距计算到父元素的边界，则将元素放在
div元素中会在元素之间引入额外的间距，即使div本身没有边距或填充。如果在元素周围添加未设置样式的div，则元素周围的边距应保持不变。daolsyd02#
什么时候有用？
最简单的例子：返回段落和标题的列表，每个段落和标题都带有
margin-top和margin-bottom。您需要在文章的顶部和底部以及不同元素之间留有边距。使用边距折叠，您可以在第一个或最后一个项目上不设置特殊边距（不是原始CSS规范的一部分！）或填充容器。
但我同意，总的来说，这是一个毫无意义的功能。
rxztt3cl3#
考虑包含多个段落的文本正文。您希望每个段落以2 em分隔，并且希望第一段与前面的内容以2 em分隔，最后一段与后面的内容以2 em分隔。
使用以下CSS很容易实现这一点，因为分隔段落的上下边距将折叠：
如果边距不折叠，这将导致边距被4 em而不是2 em的空格分隔。如果边距不折叠，实现所需效果的唯一方法是为第一段和最后一段设置一些额外的规则，这将涉及为它们指定一个类或id（如果文本被更改，则必须保持该属性），或者将它们 Package 在一个不必要的额外元素中，并使用：first-child和：last-child，或者......好吧，您明白了。
我可以保证，如果保证金崩溃没有发生，所以将有很多重复的问题，要求变通办法，以实现一致的间距，上述规则提供：-）