Why no rule for un-collapsing margins

Question

There are circumstances under which elements' vertical margins will collapse. Sometimes the author doesn't want this to happen, and I understand that the only way to "un-collapse" margins is to:

Set a border sized >= 1px
Set a padding sized >= 1px

These workarounds make sense to me, but they are just that: workarounds, and they have drawbacks. I'm surprised that there's not some kind of css3 property like margin-collapse: none;, similar to border-collapse.

Is it really true that setting a border/padding is the only way to uncollapse margins?

Can you give an example of collapsing margins? I haven't heard of them before. — Blender, Aug 17 '12 at 05:22
If you add any padding to an object, it's margins will not be collapsed. — jfriend00, Aug 17 '12 at 05:26
@Blender - Read this: http://complexspiral.com/publications/uncollapsing-margins/. — jfriend00, Aug 17 '12 at 05:27

BoltClock · Accepted Answer · 2014-06-11T02:42:35.207

No, there are numerous other ways, including floating, clearance, absolute positioning, setting overflow to values other than visible, setting a certain min-height, etc, which you can determine based on what the spec says.

But you're right in that all of these are workarounds with various side effects and disadvantages, and there is no true "off switch" available in CSS like margin-collapse, not even in the CSS3 Box Model module. A possible rationale is that margin collapse is supposed to happen naturally, and therefore the only way it can be prevented is as a side effect, but that's just my guess, as I agree there are several cases where it isn't intuitive or appropriate.

That said, if you're feeling adventurous you could make a suggestion on the www-style mailing list, and see what they say. I don't think you're going to have much luck, though.

Why no rule for un-collapsing margins

1 Answers1

Linked