margin collapse

Question

Hello!

1) The instructor says that the 24px gap above the header is caused by 'margin collapse' He said there was nothing to seperate the body from the main wrapper so that is why there is a collapse. My image of the word collapse is that everything closes in, so I would think there wouldn't a visible white space above the header. Can you please help me see margin-collapse as a big gap or white space(if the body is white)? Right now, this concept is not intuitive.

2) There are long strips of white spaces between the header, primary content, secondary content and the footer. Is that caused by 'margin collapse'. Gee, in this case, what is margin collapse.

3)Before the instructor starts to talk about wrapper div, he says "if we want to give our page a full background color or image, we have to add it to the html element.' What does that mean?

thanks!

Answer 1 · 2014-06-19T00:40:38Z

June 19, 2014 12:40am

First two questions are a bit confusing but I can answer your third one.

3) The Html element should come before your body element like so:

<html>
  <body>
    <h1>Hello there</h1>
  </body>
</html>

So he is saying that if you want your site to have a uniform background image or color, you need to attach that to the html tag, which would look something like this:

html {
  background: url('http://lorempixel.com/400/200/');
}

Answer 2 · 2014-06-20T09:16:21Z

June 20, 2014 9:16am

Hello guys! Sorry for the confusion. Let me copy and paste the instructor's words: This is is the area I am unsure of:

• So why is there a 24 pixel gap above our header area? Because we want the header to be positioned at the very top of the page. What we are actually seeing here is the top margin of our H1 logo element. So now you may be wondering well, the heading is inside the header container; shouldn't we see the margin area inside the header instead? Well, this is what's called a margin collapsing issue, and it happens in different scenarios. But in this case, it's happening because there's no border, padding, content, or anything to separate the top margin of our block level body element with the top margin of its first child.

1) The instructor is saying that H1 tag comes with a default margin, and when placed inside the header section it causes a margin collapse; hence in the video, you see 24 px white space outside and right above the wrapper. I don't understand why this 24px white space does not happen inside the div.

2) Also, the h1 element is nested inside the header and wrapper div tags. I would find it more intuitive if the top margin on the div tag was the reason for this 24px margin of white space at the top of the div. Dont headers , and div tags come with their own default margin, why cant one of them ( actually, I expect the div tag to cause a margin collapse) cause of the 24px white space at the top of the page.

Hope that clears all confusion!!

Welcome to the Treehouse Community

Looking to learn something new?

orange sky

orange sky

margin collapse

2 Answers

alex mattingley

alex mattingley

orange sky

orange sky