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!
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

Tom Hill
14,232 PointsWhite 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
39,199 PointsThe easiest solution is to use
h1 { margin: 0; }

James Barnett
39,199 PointsThat 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
14,232 PointsThanks 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
14,232 PointsOh 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
14,232 PointsGreat, Thank you