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

Question

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

Real-time 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> 

Rendering:

Answer 1

This is called collapse collapse. This behavior is specific to each specification. More on this.

In principle, when two vertical fields overlap, only the largest is taken into account. Give any of the elements a 20px space to fix it.