CSS margin strange behavior, why?

Question

Having the HTML below

&l         


        

Answer 1

if you want to have the desired effect you can use "padding" instead, margins always collapse

Answer 2

That behavior is called collapsing margins. The margin values are not added but the higher value is used:

Vertical margins may collapse between certain boxes:

• 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. […]
• […]

Answer 3

Here is a good explanation of margin collapsing. Basically, it seems that all adjacent margins will collapse into each other, per the CSS specification and against all common sense.