为什么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

这是利润率的工作方式.相邻的垂直边距相互坍塌:

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

另请参见:折叠边距