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

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

Gravity.

Just kidding, obviously lol

Christopher Debove
PLUS
Christopher Debove
Courses Plus Student 18,368 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...

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,368 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.

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