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 CSS Layout Basics Getting Started with CSS Layout Why Vertical Margins Collapse

Luqman Shah
Luqman Shah
3,016 Points
Posted by Luqman Shah
Luqman Shah
3,016 Points

Ok so let me get this straight... "Why vertical margins collapse"

So essentially, if I had two elements: A header and a div:

<header>
  <h1>This is a heading</h1>
</header>
<body>
  <div>
    <h2>content</h2>
      <p>some more content</p>
  </div>
</body>

I target both with css, and I give them both margin values:

header {
  margin-top: 10px;
  margin-bottom: 10px;
}

div {
  margin-top: 10px;
  margin-bottom: 10px;
}

Both margins will collapse...simply because there are no padding or border values declared? So there is nothing separating both margins apart from each other? So now which margin will collapse into which margin?

NOTE: I used this understanding on the quiz question and got the answer correct, so is my understanding correct?

1 Answer

Abraham Juliot
Abraham Juliot
47,353 Points
Abraham Juliot
Abraham Juliot
47,353 Points

Note, your <header> element needs to be within the <body>.

<header> </header>

collapse occurs here -- the greater margin of the two becomes the margin

<div> </div>

There's a lot more info on this topic here: