Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Tom Hill
Tom Hill
14,232 Points

White strip at the top of the page

Hi, I have a div element that I have styled so it is the size of the screen height and width with this code:

body, html {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

div {
    height: 100%;
    width: 100%;
    background-color:#123456;
}

But there is a white strip at the top of the page spanning the entire length. Does anyone know what this is and how to get rid of it?? Thanks - Tom

3 Answers

James Barnett
James Barnett
39,199 Points

The easiest solution is to use 

h1 { margin: 0; }
James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

That sounds like a user-agent style sheet is adding some margin. Although it doesn't seem like it should.

I just tried it out with this code and the color took up the entire page.

<!doctype html>
<html>
<head>
<style>

    body, html {
        height: 100%;
        width: 100%;
        padding: 0;
        margin: 0;
    }

    div {
        height: 100%;
        width: 100%;
        background-color:#123456;
    }

</style>
<body>

    <div></div>

</body>
</html>
Tom Hill
Tom Hill
14,232 Points

Thanks James, I just tried your code and it worked fine, I don't know what went wrong - The only thing different before was it was in an external css file that I linked to instead of inside the style tags. Thanks so much - Tom

Tom Hill
Tom Hill
14,232 Points

Oh wait! - Hang on, I forgot to mention there was h1 text inside the tag and when I put it back in, the white strip reappeared!!

Here's a code pen of my exact code: http://cdpn.io/okzji

And here it is in full:

<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>

    <div>
        <h1>Hello World!</h1>
    </div>

</body>
</html>

    body, html {
        height: 100%;
        width: 100%;
        padding: 0;
        margin: 0;
    }

    div {
        height: 100%;
        width: 100%;
        background-color:#123456;
    }

Is it just something to do with using text inside a div?

Thanks, Tom

Tom Hill
Tom Hill
14,232 Points
Tom Hill
Tom Hill
14,232 Points

Great, Thank you