Adjusting the margin-top of a div inside of a container div pushes both the inner div and container div down from body

Question

I feel like this must be an issue of me doing something silly, but I can\'t figure it out. Here\'s a demo page showing my problem. The source of the page:

Answer 1

This is caused by collapsing margins. If two elements have touching margins, then the margins merge. There is a great explanation of this here. Go to the section called Collapsing Margins Between Parent and Child Elements.

Here are three different solutions.

One is to add overflow: auto to the container. This changes the BCF (Block Formatting Context). This technique is described in more detail here.

#container {
    height: 100%;
    background-color: black;
    /* Add oveflow auto to container */
    overflow: auto;
}

http://jsfiddle.net/bzVgV/20/

A second is to use padding on the container instead of a margin on logo. This takes margins out of the equation.

#container {
    height: 100%;
    background-color: black;
    /* Use padding on container instead of margin on logo */
    padding-top: 30px;
}

http://jsfiddle.net/bzVgV/18/

A final solution is to make the margins no longer touch. You can do this by adding a 1px padding to the parent.

#container {
    height: 100%;
    background-color: black;
    /* Now margins of container and logo won't touch */
    padding-top: 1px;
}

http://jsfiddle.net/bzVgV/21/