div在另一個div的頂部有保證金頂部，只有1個保證金

Question

我有一個div在另一個之上。頂部div有margin-bottom: 10px，底部div有margin-top: 10px，但兩個div之間只有10px的空間。

活生生的例子：http://jsbin.com/efugok/1/edit

帶CSS的HTML：

<div style="margin-bottom:10px; background: #e6e6e6;" id="one">one</div> 
<div style="margin-top:10px; background: #ccc" id="two">two</div> 

渲染：

Answer 1

這就是所謂的保證金崩潰。這是一個符合規範的行爲。 Read more about it.

基本上，當2個垂直邊距重疊時，只有最大的一個被考慮在內。給任何元素一個20px的邊距來解決它。