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

The margin: property is not actually doing anything to move the header to the top

I'm not quite sure I understand what the margin property is doing with regards to the header and the whitespace we want to remove at the top.

Nick sets it to 

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

to remove the white space from the top , but the actual work of removing the white space is being done by the padding being set to 5px.

Technically, I could write this as :

header{
      padding: 5px 0 0 0;
}

and it would still remove the whitespace. This is of course, ignoring the 30px margin we want to set at the bottom.

Am I right?

3 Answers

Jake Lundberg
Jake Lundberg
13,965 Points
Jake Lundberg
Jake Lundberg
13,965 Points

You are correct. Specifying a 0 value for the top of the margin is not changing anything with the white-space at the top of the header as it already has a margin of 0. if you only want to add the margin at the bottom, you can do as you did: 

margin: 0 0 30px 0;

of your can do: 

margin-bottom: 30px;

both of these are doing the same thing.

MD AFRID UDDIN MONDAL
MD AFRID UDDIN MONDAL
2,877 Points
MD AFRID UDDIN MONDAL
MD AFRID UDDIN MONDAL
2,877 Points

Margin creates a gap in between element(in your case it is header) and the page from top,right,bottom and left. Where, Padding creates gap in between text and and the element(in your case it is header). So, If you set margin: 5px 0 0 0; it will create a gap in between page and your header and it push your header down by 5px. And if you set padding 5px 0 0 0; it will push down your text 5px from top most header postion to below, not the position of the header corresponding to page. Now you can put your own value as your want see your customize page.

kameron mcgowan
kameron mcgowan
1,717 Points
kameron mcgowan
kameron mcgowan
1,717 Points

put your 5px on the end of your 3 spaced 0s

Rafael Marcano
Rafael Marcano
3,735 Points
Rafael Marcano
Rafael Marcano
3,735 Points

kameron mcgowan I don't understand. All that does is move the 5px of padding to the right.

sibal gesekki
sibal gesekki
3,484 Points

kameron mcgowan useless