div has margin bottom on top of another div with margin top, only 1 margin

Question

I have one div on top of the other. The top div has margin-bottom: 10px, the bottom div has margin-top: 10px, but there is only 10px of space between the two divs.

Live example: http://jsbin.com/efugok/1/edit

Html with Css:

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

Rendered:

Answer 1

That is called margin collapse. It is a per-spec behavior. Read more about it.

Basically, when 2 vertical margins overlap, only the largest one is taken into account. Give any of the elements a margin of 20px to fix it.