How do I remove the top margin in a web page?

Question

I have had this problem with every web page I have created. There is always a top margin above the \'main container\' div I use to place my content in the center of the pag

Answer 1

I have been having a similar issue. I wanted a percentage height and top-margin for my container div, but the body would take on the margin of the container div. I think I figured out a solution.

Here is my original (problem) code:

html {
    height:100%;
}

body {
    height:100%;                    
    margin-top:0%;
    padding:0%; 
}

#pageContainer {
    position:relative;
    width:96%;                  /* 100% - (margin * 2) */
    height:96%;                 /* 100% - (margin * 2) */           
    margin:2% auto 0% auto;
    padding:0%;
}

My solution was to set the height of the body the same as the height of the container.
html { height:100%; }

body {
    height:96%;     /* 100% * (pageContainer*2) */
    margin-top:0%;
    padding:0%; 
}

#pageContainer {
    position:relative;
    width:96%;                  /* 100% - (margin * 2) */
    height:96%;                 /* 100% - (margin * 2) */           
    margin:2% auto 0% auto;
    padding:0%;
}

I haven't tested it in every browser, but this seems to work.