CSS邊距加起來還是加起來？

Question

讓我們假設我們有下面的代碼：

<div style="margin-bottom:100px;">test</div> 
<div style="margin-top:100px;">test</div> 

我注意到，有時它創建元素之間的保證金100像素，有時是200像素（當我們使用的是我不熟悉的某些設置）。我無法在規範中找到任何關於此的信息。這取決於什麼？

如果我們在空白文檔中有h1和p，則h1的保證金將與p的保證金相結合。他們不會加起來。無論哪個更大將被使用。

Answer 1

發生這種情況是因爲您的利潤率允許摺疊。某些邊距可能會重疊（主要是塊單元），並形成由計算出的元素樣式規則中定義的兩個值中較大的一個來定義的組合邊距 - 這就是發生的情況。 This section從CSS Box Model文件詳細解釋它。

編輯：作爲興趣點，你可以在幾個方面

• 解決這個問題沒有打破的東西製作的元素（即打破了可摺疊的利潤。）（多？） width: 100%; display: inline-block
• 將height: 0; width: 0; overflow: hidden塊放在元素之間並在其中放置一個點或其他東西。

我分叉阿什利的fiddle來演示。可能還有其他方法，但如果需要的話，這些方法可能是一種骯髒的方式來解決可摺疊的邊距問題。