Question

I am scratching my head that why I need to put

padding-top: 1px;
under #pageHeader identifier to get background image at top left set at #container otherwise it displays few pixels below from top.

Even If I put padding-top : 0; it doesn’t work.

Moreover it also works if I put it under #intro OR I remove h1 tag inside pageheader div.

My CSS file

html 
    {
        margin: 0;
        padding: 0;             

    }
body 
    { 
        font: 75% georgia, sans-serif;
        line-height: 1.95;
        color: #555753;         
        background: #fff url(../images/bottom.gif) no-repeat bottom right; 
        margin: 0; 
        padding: 0;
    }
#container 
    { 
        background: url(../images/bg.gif) no-repeat left top; 
        padding: 0 175px 0 110px;  
        margin: 0; 
        position: relative;
    }   
#intro 
    { 
        min-width: 470px;
        width: 100%;
    }
#pageHeader 
    {
        padding-top: 1px;   
        height: 87px;
    }

My HTML file looks like

<div id="container">
<div id="intro">
<div id="pageHeader">
<h1>Hello World!</h1>   
</div>
</div>
</div>

Edit~~
Its html and body.. actually in my code but I was messed up with editor while pasting here.

Answer 1

The phenomenon you’re observing here is called “collapsing margins”. The h1 element has a certain margin. This collapses with the margins of the outer divs, so the pageHeader div is shifted down. By setting a non-zero padding to the pageHeader div, you prevent the margins from collapsing.

See the W3C specs, if you read carefully they say:

“Two margins are adjoining if and only if: … no padding … separate them”

The rules also say:

“When two or more margins collapse, the resulting margin width is the maximum of the collapsing margins’ widths.”

So the effect is that your outer divs which have top margins of 0 actually acquire the top margin of the h1 element which is the maximum of all the top margins.