在CSS中引入了margin collapse规则的原因是什么？

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

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像素间隔开。

来源

2009-09-17 actual

这是其中一种情况下，直到你意识到替代品没有意义，它才没有意义。

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

由于边距是到另一个元素的距离，所以距离元素到周围元素的距离是有意义的，而不是父元素的边界。

如果边距将计入父元素的边界，则将元素放置在元素div中会引起元素之间的额外间距，因为div本身没有边距或填充。如果在其周围添加一个未标注的div，元素周围的边距应该保持不变。

来源

2009-09-17 11:28:27 Guffa

其实，我宁愿替代它的清晰度。虽然我同意在某些情况下利润率崩溃有帮助。 – 2009-09-17 11:32:01

这对兄弟元素来说非常合乎逻辑。但我仍不清楚为什么儿童元素的利润率会影响父母的利润率。 – actual 2009-09-17 11:49:51

@actual：无论周围的元素如何，子元素和父元素的边界之间的间隔必须相同。周围的元素不能在父元素和子元素的边界之间引入间隔，因为这可能会改变父元素的大小，所以边距必须将父元素也推走，而不仅仅是子元素。 – Guffa 2009-09-17 12:28:56

当它可能有帮助吗？

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

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

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

来源

2009-09-17 11:43:30

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

这是很容易用下面的CSS来实现，因为顶部和底部边缘分离的段落会崩溃：

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

如果利润没有垮掉，这将导致利润率用空格隔开4em，而不是2em。如果没有边际崩溃，达到预期效果的唯一方法是为第一段和最后一段设置一些附加规则，这将涉及给他们一个类或id（如果文本被改变，则必须保留这些规则），或者将它们包裹在另外不需要的额外元素中，然后使用：第一个孩子和最后一个孩子，或者......你明白了。

我可以保证的是，如果没有发生倒塌保证金，所以才会有很多重复的问题寻求解决办法，以实现一致的间距，上述规则规定:-)

来源

2009-09-17 11:44:03 NickFitz

其实，你可以通过简单的确保前面的内容和下面的内容有一个边距来解决这个问题。这样你就可以避免给第一个或最后一个段落一个class/id和一个特殊的边距。 – Magne 2012-01-04 14:47:59

在我看来，在这种情况下不会崩溃将是天真的期望。打破了PoLS给我。另外，利润率边际崩溃时，您无法“收缩”，而添加小标记来处理您的情况很简单，即使它可能会重复。 – nicodemus13 2014-05-14 20:57:09

在CSS中引入了margin collapse规则的原因是什么？

回答

相关问题