CODEWITHSUNDEEP
htmlcss
starscape
starscape

Reputation: 2993

HTML/CSS - Why does my page have a small empty area around it?

Here I have a very simple webpage. One div, basically. But this div has an area of nothing around it despite my width being set to 100%. Here's a picture demonstrating.

enter image description here

Below is my code.

<html>
    </head>

        <link href='mainStyle.css' rel='stylesheet'/>

        <script src='jquery.js'></script>

    </head>
    <body>

        <div id='navTop'></div>

    </body>
</html>

And my mainStyle.css:

#navTop{
    width:100%;
    height:10px;
    background-color: blue;
    position: absolute;
    margin: none;
    padding: none;
}

This is probably just a dumb CSS mistake. Any help is appreciated!

Upvotes: 0

Views: 520

Answers (4)

Frederik.L
Frederik.L

Reputation: 5620

Your browser has default styling (font-size, font-familly, line-height, etc. including margin and padding around the document).

To avoid extra space around the document, you may add in your CSS :

body,div,p { margin:0;padding:0; }

so these elements won't keep default values.

Another, fancy method, is to use a CSS reset script to ensure that almost all default stylings are overwritten to be 0/null so there is only your own rules that count.

Upvotes: 0

Dan
Dan

Reputation: 3890

It's likely because you're <body> needs to have it's margins and padding set to 0.

CSS:
body { margin: 0px; padding: 0px; }

Upvotes: 0

Mark Parnell
Mark Parnell

Reputation: 9200

Browsers have default margin/padding on various elements, including html and body. You'll need to set them to zero as well if you want your div to go right to the edges.

Upvotes: 3

Adrift
Adrift

Reputation: 59859

Add:

body {
margin: 0;
}

Browsers give the <body> 8px of margin by default

Upvotes: 3

Related Questions