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

CSS

Posted by Erik Huang
Erik Huang
9,123 Points

Vertical space between divs.

There's vertical space between divs even though I removed all the margin, borders and paddings...

HTML:

<body> <div id="container> <div id="header"></div> <div id="content"></div> <div id="footer"></div> </div>

body { background-color: green; }

h1 { color: red; }

p { color: orange; margin: 0; padding: 0; }

container{

   width: 100%;

}

header{

width: 100%;
margin: 0;
padding: 0;
background-color: yellow;

}

content{

width: 100%;
margin: 0;
padding: 0;
background-color: blue;

}

footer{

width: 100%;
margin: 0;
padding: 0;
background-color: teal;

}

2 Answers

Christian Lawrence
Christian Lawrence
3,941 Points

Hi Erik

Try adding this CSS before your own custom style http://meyerweb.com/eric/tools/css/reset/

Otherwise can you post your HTML too :)

Erik Huang
Erik Huang
9,123 Points

This worked and I totally forgot about this.

Thanks!

Samuel Webb
Samuel Webb
25,370 Points
Samuel Webb
Samuel Webb
25,370 Points

Certain elements cause margins to be added. Headline elements (h1, h2...) do this so if you have any elements that cause white space, you'd have to remove it from those as well.

Erik Huang
Erik Huang
9,123 Points

Thank you very much, I tried your solution as well and it also worked! So without reseting my style margins can be added without it in my code.