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 How to Make a Website Styling Web Pages and Navigation Build Navigation with Unordered Lists

Rafael Marcano
Rafael Marcano
3,735 Points
Posted by Rafael Marcano
Rafael Marcano
3,735 Points

Why doesn't setting the top margin to zero remove the whitespace in the top of the header?

When we add :

header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0 ;
  }

It seems that the only parameter that actually has any effect on the whitespace in the header is the padding. Setting the top margin to zero doesn't seem to do anything. It seems that the one actually closing the whitespace is the padding.

4 Answers

Jamie Holloway
Jamie Holloway
4,549 Points
Jamie Holloway
Jamie Holloway
4,549 Points

Your issue is your h1 element on line 37.

The margin on your h1 is pushing it all down. Changing the margin to zero on there fixes it. Then to create space between your writing and the top of the page, use padding instead.

h1{
  font-family:'Changa One', sans-serif;
  margin: 0;
  padding-top: 10px; 
  font-size: 1.75em;
  line-height: 0.8em;
  font-weight: normal;
}
Abe Layee
Abe Layee
8,378 Points
Abe Layee
Abe Layee
8,378 Points

By default, browser has default margin and padding. As a result, when you set the margin/padding to 0,it removes the default margin and padding. The code below sets the top margin to zero,right margin to 0 ,bottom to 30px and left to 0. Think of the shorthand property as clockwise top,right,bottom, and left. The same thing goes to the padding.

header {
 margin: 0 0 30px 0;
 padding: 5px 0 0 0 ;
}
Rafael Marcano
Rafael Marcano
3,735 Points
Rafael Marcano
Rafael Marcano
3,735 Points

Yes, I understand what margin should do, but it doesn't actually seem to be removing the top whitespace, only the padding seems to be closing the top gap. I'm testing this and I can comment the whole margin line out and the padding will close the whitespace.

Abe Layee
Abe Layee
8,378 Points
Abe Layee
Abe Layee
8,378 Points

Trying setting the header margin to zero.

 header {
   margin:0;
}
Rafael Marcano
Rafael Marcano
3,735 Points
Rafael Marcano
Rafael Marcano
3,735 Points

Yes my header margin is set to 0, and without any other css rules, it won't close the whitespace. Only after adding the padding , will it close the gap. Edit: Check this Codepen, it should show what I mean a bit more clearly:

http://codepen.io/anon/pen/rVyBRW

If you see, everything is commented out in header{} except for margin. The top margin is set to zero , and we still get a whitespace. Comment out the margin, and uncomment the padding. It should close the whitespace.

Ryne Smith
Ryne Smith
1,297 Points
Ryne Smith
Ryne Smith
1,297 Points

I tried commenting out declarations in the code as well, but the declaration that filled in the whitespace for me was the float declaration for the header. I am not sure why since I thought that floating an element left everything above them unaffected. However, I am wondering if floating an element defaults the margins to zero to enable everything to flow around it, but it is up to the coder to set any margins.