#containerDiv {
width: 700px;
padding-top: 1px;/*important*/
margin-top: -1px;/*important*/
}
#innerDiv {
width: 200px;
margin: 20px 0 0;/*You can now apply a top margin without trouble*/
}

A very annoying 'bug' can occur when you are applying a top margin to an element inside a container. The inner elements margin seems to "leak" out of the top of the container. This pushes the container down, and looks very messy if you have a background applied.

Note: This is NOT and bug! Yay etc..

A quick fix is to add a padding of 1px, and a margin of -1px. Or you could add a border to the container.

CSS Collapsible Margins Fix (margin-top)

css

CSS