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 trialLuqman Shah
3,016 PointsOk 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
47,353 PointsNote, 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: