为什么10px + 10px = 10px？

Question

我有以下脚本所在的边距。 portlet类表现得很奇怪：

http://jsfiddle.net/mYx5y/19/

它应该在每个portlet周围添加10px，这应该意味着portlet之间的间隔为20px。出于某种原因，如果portlet在其右侧或左侧有一个小部件，我只得到20px，但如果portlet在其上方或下方有另一个portlet，则只有10px。

为什么我垂直得到10px？

Answer 1

由于保证金不加起来，它们会崩溃。如果你有两个元素A和B，A margin = 10px，B margin = 15px，A和B之间的间距将是15px。

两种解决方案：

1. 使用margin-bottom：20px，margin-top：0px
2. 将它们包装到容器中并应用填充：10px 0;

Answer 2

由于边距会崩溃，因此不会添加它们，仅添加max() - ed（将使用相邻对象的最大边距值）。如果空间是元素的一部分，请使用填充。

Answer 3

这是保证金的运作方式。相邻的垂直边距相互坍塌：

  

正常流量崩溃中块级别框的两个或多个相邻垂直边距。得到的边距宽度是相邻边距宽度的最大值。在负边距的情况下，负邻接边距的绝对值的最大值从正邻接边距的最大值​​中减去。如果没有正边距，则负相邻边距的绝对最大值将从零中扣除。注意。相邻的框可以由与兄弟姐妹或祖先无关的元素生成。

另请参阅：Collapsing margins