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 trialRafael Marcano
3,735 PointsWhy 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
4,549 PointsYour 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
8,378 PointsBy 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
3,735 PointsYes, 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
8,378 PointsTrying setting the header margin to zero.
header {
margin:0;
}
Rafael Marcano
3,735 PointsYes 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
1,297 PointsI 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.
Stamford Hwang
3,329 PointsI had the same question and found this:
Rafael Marcano
3,735 PointsRafael Marcano
3,735 PointsAh that's it! Thanks!