Question

This is my code :

HTML

<div class='father'>
    <div class='son'>Son</div>
</div>

CSS

.father
{
    background-color:blue;  
}

.son
{
    margin-top:50px;
    background-color:red;
    height:50px;
}

Where is the background-color blue of the father?
I know how to fix this problem (putting padding-top:1px to the father) but I’d like to know why of this behaviour!

For me it doesnt make sense, because on every browsers, not only IE, this is the behaviour.

Answer 1

This is a result of Collapsing Margins. You can read a good article by Eric Meyer on this topic where he illustrates this exact behavior. The following image is from his article.

Here’s what the CSS2 specification has to say about it.

8.3.1 Collapsing margins

If the top and bottom margins of a box are adjoining, then it is
possible for margins to collapse through it. In this case, the
position of the element depends on its relationship with the other
elements whose margins are being collapsed.

• If the element’s margins are collapsed with its parent’s top margin, the top border edge of the box is defined to be the same as
  the parent’s.
• Otherwise, either the element’s parent is not taking part in the margin collapsing, or only the parent’s bottom margin is involved.
  The position of the element’s top border edge is the same as it
  would have been if the element had a non-zero bottom border.

Note that the positions of elements that have been collapsed through
have no effect on the positions of the other elements with whose
margins they are being collapsed; the top border edge position is only
required for laying out descendants of these elements.

Source: http://www.w3.org/TR/CSS2/box.html#collapsing-margins