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

Posted by Katsumi Suno
Katsumi Suno
4,194 Points

Is there a logical reason behind collapsing margins?

I've read several articles about collapsing margins including the MDN entry about the topic and it's always kinda described like it has to be that way, like there is some "use" to it. But to me it only seems like an annoyance...

What are the thoughts behind this behaviour? Is there any or is it more like a bug or a technical necessity?

2 Answers

Michelle Harrison
Michelle Harrison
8,782 Points
Michelle Harrison
Michelle Harrison
8,782 Points

Gravity.

Just kidding, obviously lol

Christopher Debove
PLUS
Christopher Debove
Courses Plus Student 18,373 Points
Christopher Debove
Christopher Debove
Courses Plus Student 18,373 Points

Well IT IS an annoyance (for most of front-end developers) but that's the way the CSS standards are done and the browsers render the margin. So you've got no choice to do with it...

Katsumi Suno
Katsumi Suno
4,194 Points

Sure, but what I'm asking is: Did they make it deliberately or is it a technical issue. And if they did make it deliberately, what's the reason? I'm just curious about these little things ;)

Christopher Debove
Christopher Debove
Courses Plus Student 18,373 Points
Christopher Debove
Christopher Debove
Courses Plus Student 18,373 Points

I don't really know the whereabout but I don't really think it's a technical issue.

Sometimes it can be useful to have margins which collide. For example if you need to hide an element and the element before and after do have margin, those margin are collapsing (only the greater is kept) and you do not have margins which stack.

Katsumi Suno
Katsumi Suno
4,194 Points

Hm, that seems like a valid case where it might be useful, although probably a rare one...