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 trialKatsumi Suno
4,194 PointsIs 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
8,782 PointsGravity.
Just kidding, obviously lol
Christopher Debove
Courses Plus Student 18,373 PointsWell 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
4,194 PointsSure, 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
Courses Plus Student 18,373 PointsI 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
4,194 PointsHm, that seems like a valid case where it might be useful, although probably a rare one...