Margins trouble, top margin goes on top of bottom margin

So let's say I had several <div>s, each having a margin-top and a margin-bottom. I would expect these elements to be arranged one after the other: Top Margin -> Div -> Bottom Margin for each one. However, the top margin is "going over the bottom margin"开发者_运维百科 (fiddle). So the distance between each element is just the margin-top.

I've found a way to fix this using float:left;, however I must not use this property, neither absolute positioning.

PS: If you can't see the problem in the fiddle, use something like Chrome's console.

What you are seeing is called margin collapse. It is the correct behaviour according to the standard.

Margin does not push down another margin