CODEWITHSUNDEEP
csshtmlmargin
user2630210
user2630210

Reputation: 127

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.

Upvotes: 11

Views: 53297

Answers (5)

M Shafaei N
M Shafaei N

Reputation: 449

I had similar problem and I solved it by setting negative margin. You could test the below setting.

 #mainContent {... margin-top:-25px;}

Upvotes: -1

Ari
Ari

Reputation: 5019

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

Upvotes: 2

DaniP
DaniP

Reputation: 38262

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.

Upvotes: 20

Code Maverick
Code Maverick

Reputation: 20425

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" />

Upvotes: 7

Harry
Harry

Reputation: 89780

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

Upvotes: 1

Related Questions