css - 为什么 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. 使用边距底部：20px，边距顶部：0px
2. 将它们包装到容器中并应用填充：10px 0;

Answer 2

因为边距折叠，所以没有添加，只是max()-ed（将使用相邻对象的最大边距值）。如果空间是元素的一部分，请使用填充。

Answer 3

这就是利润的运作方式。相邻的垂直边距相互折叠：

正常流折叠中块级框的两个或多个相邻垂直边距。生成的边距宽度是相邻边距宽度的最大值。在负边距的情况下，从正邻接边距的最大值​​中减去负邻接边距的绝对值的最大值。如果没有正边距，则从零中减去负相邻边距的绝对最大值。笔记。相邻框可能由与兄弟或祖先不相关的元素生成。

另请参阅：折叠边距