CSS CSS Layout Basics Getting Started with CSS Layout Why Vertical Margins Collapse

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,338 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: