unexpected margin with very simple html

Question

I have a very simple html. The red div is inside the blue div and has a 10 px top margin. On non-ie browsers, the blue box is 10 px apart from the top of viewport and the re

Answer 1

The margins are being merged. The output produced by IE is probably incorrect.

In the specifications (which are down for me at the moment):

Two or more adjoining vertical margins of block boxes in the normal flow collapse. The resulting margin width is the maximum of the adjoining margin widths.

You can use borders instead of margins, with border-color set to transparent.