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

Arjun Singh
Arjun Singh
2,457 Points
Posted by Arjun Singh
Arjun Singh
2,457 Points

margin at the top of header does not go away

To remove white space caused by margin of h1 element, we are asked to use the following code:

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

So, in the video it is being implied that margin: 0 0 30px 0 will take away the white space at the top of the header. But, I noticed that the white space will not go away if we only use margin in the header. Please use the below code and replace the above header code with it:

header {
    margin: 0 0 30px 0;
}

You will notice that the white space does not go away with the above header code(without float property)

Now, use the following code for header:

header {
    float:left;
    width:100%;
}

You will notice the white space caused by margin of h1 element goes away.

1.) Can TreeHouse explain why float removes the space and not margin:0 0 30px 0?

2.) Is it because h1 is more specific (cascading effect) and hence the margin of 0 at the top of header is overridden by margin of h1 element ( since h1 element is inside header)? If yes, how does float remove this space?

4 Answers

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

Hi Arjun Singh,

The gap you're seeing is the top margin of the h1 element. The h1's top margin is touching the top margin of the body, and the space between the h1 and its containers collapsed because there’s no border or padding area above the h1 to separate its top margin from the body. This is what’s called a collapsing margin.

Once Nick adds the padding value, it interrupts the two touching margins, so the space between the body and header goes away. This video explains vertical collapsing margins — checkout the part at 3:14.

The reason it also removes the space with float:left is because it takes the header out of the normal document flow, so it doesn’t acknowledge the top margin. You’ll learn more about this in the CSS Basics and CSS Layout Techniques courses.

Hope this helps. :)

Ryan Maugin
Ryan Maugin
2,742 Points
Ryan Maugin
Ryan Maugin
2,742 Points

try change the padding or margin of the body to 0px or take away padding from the elements you are using in your header and see if you can spot what element is pushing it down because some element have padding by default

Arjun Singh
Arjun Singh
2,457 Points
Arjun Singh
Arjun Singh
2,457 Points

I only have elements that were added in the video. The video suggests that { margin: 0 0 30px 0; } in the header will override the margin set in h1. This does not happen if you do not add float. Its the float property thats removing the white space at the top of header, and I want to know why that happens

Eduardo Andre De Backer Diaz
Eduardo Andre De Backer Diaz
11,472 Points
Eduardo Andre De Backer Diaz
Eduardo Andre De Backer Diaz
11,472 Points

If you use the developer tool on chrome you can figure it out what element is creating the top margin on your page. Click on the magnifying icon in the developer tool and place your mouse cursor above the <ul> tag inside your main <section> tag and you will realise what going on.

In your CSS set the margin to 0 to that <ul> tag and let me know if the problem goes away.

My english is basic so I do my best to explain it right.

Regard. Eduardo De Backer (from Dominican Republic)