How do I remove the space between div and top of page?

问题

This has probably been asked a million and one times, but I would appreciate it if someone could explain the behavior of the divs to me..

I have a container div which I am aligning in the center of the page, which has a gap between the top and the top of the page. I want it to be flush against the top of the page. I am assuming that there is some sort of margin or padding that I need to remove but I can't think what it could be. Even with nothing in the div there is still a gap.

    <body>
    <div id='mainContent'>

    </div>
</body>


body
{
    background-color:black;
    background-image:url("img/background.jpg");
    background-repeat:repeat;
}

#mainContent
{
    width:1200px;
    height:500px;
    background-color:#FFFFFF;
    margin-left:auto;
    margin-right:auto;
    margin-top:0px;
}

Here is a JSFiddle to give you an idea of what I mean.

Can someone please explain why the div is pushed down as it is? Is there a robust solution that doesn't affect any content that is put in the div??

NOTE: If the screen width is smaller than the div width, there will be a gap on the left hand side aswell.

回答1:

You need to reset the default margin of the body that is 8px aprox.

body,html {
  margin:0;
  padding:0;
}

The Demo http://jsfiddle.net/H76bq/3/

For default all elements has some properties:

http://www.w3.org/TR/CSS21/sample.html

You can reset this in your own css.

回答2:

You could use a star selector and reset everything so that you can set everything yourself:

* { margin: 0; padding: 0; border: none; }

Or if you wanted to use a master reset stylesheet you could use Jonathan Neal's Normalize CSS via Google CDN.

Normalize.css is a customisable CSS file that makes browsers render all elements more consistently and in line with modern standards. We researched the differences between default browser styles in order to precisely target only the styles that need normalizing.

Just put this in your head:

<link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" />

回答3:

Add margin: 0px; to body like below. The reason is because body by default introduces a margin.

body{
    background-color:black;
    background-image:url("img/background.jpg");
    background-repeat:repeat;
    margin: 0;
}

Demo Fiddle

回答4:

It can also been caused by line-height property. So set the line-height to as you wish!

来源：https://stackoverflow.com/questions/19815535/how-do-i-remove-the-space-between-div-and-top-of-page

标签

css

html

margin