爲什麼10px + 10px = 10px？

Question

我有以下腳本，其中的邊距。 portlet類是行爲異常：

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

應該圍繞每個portlet，這應該意味着的20像素的portlet之間的間隙被增加10px的。出於某種原因，如果一個portlet在其本身的右側或左側有一個小部件，我只能獲得20px，但如果portlet具有另一個portlet在其之上或之下，則只有10px。

爲什麼我要垂直獲取10px？

Answer 1

由於利潤率不會加起來，它們會崩潰。如果您有兩個元素A和B，A margin = 10px，B margin = 15px，則A和B之間的間距將爲15px。

兩個解決方案：

1. 使用邊距：20像素，上邊距：0像素
2. 總結他們到一個容器和應用填充：10px的0;

Answer 2

因爲利潤率崩潰，所以不會被添加，只需要max() -ed（將使用相鄰對象的最大利潤率值）。如果空格是元素的一部分，請使用填充。

Answer 3

這是利潤率如何工作。相鄰的垂直邊界互相摺疊：

在正常流動崩潰中，兩個或多個鄰接垂直邊界的塊級盒子。最終的邊距寬度是相鄰邊距寬度的最大值。在負邊界情況下，負邊界的絕對值的最大值從正邊界的最大值中扣除。如果沒有正邊距，則負邊距的絕對最大值從零中減去。注意。相鄰的框可能由與兄弟姐妹或祖先不相關的元素生成。

參見：Collapsing margins