Margin stacks on each other?

Question

I have long noticed that when two block elements are put next to each other, their margin stacks on each other. Something like this:

Both <div>s have margin: 1em, but when margin1's margin-bottom collides with margin2's margin-top, both margin just stack on each other. See on here: http://jsfiddle.net/39XmC/

What I was expecting was something like this:

Both <div>s actually give spaces on each margin and doesn't stack on each other's margins.

I know that this can be fixed by floating or overflowing the element. My question:

1. Why does this happen [theoretically]? Isn't margin not supposed to stack?
2. Is this the default behavior on browsers? Because I remember working on a project that doesn't have this behavior.

Answer 1

That behavior is normal and it's called as Collapsing Margins..

Quoting from W3C:

In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.

Adjoining vertical margins collapse, except:

• Margins of the root element's box do not collapse.
• If the top and bottom margins of an element with clearance are adjoining, its margins collapse with the adjoining margins of following siblings but that resulting margin does not collapse with the bottom margin of the parent block.