CSS, handling of margin-top, a solution

The problem can be found here: margin-top problem.

The solution is actually quite easy. Use padding instead of margin.

This problem doesn't occur at all when you apply a border to the div#header.

When you are writing style sheets, you might consider to set the margin and padding properties for every element that has a default margin and/or padding style set by the browser. That includes every element except DIV and SPAN (or any other element with display:inline; as default style). That could look like:

h1{
 margin:0;
 padding:.2em;
 font-size:1.5em;
}
p{
 margin:0;
 padding:.3em;
 font-size:1em;
}