Kilian Valkhof

Random CSS Thought: Margin-collape CSS property

I was recently introduced to the phenomenon of margin collapsing. If you didn’t click the link, this is what it does: When you have two elements with a bottom and a top margin under each other, the margins will collapse into each other, so that the larger of the two becomes the margin between them.

Delving into it #

There are some more advanced rules attached to this:

• It only happens on elements in normal flow under each other.
• It never happens on horizontal margins
• It doesn’t happen on elements with a padding or a border between them
• It doesn’t happen on elements with position:relative; or position:absolute
• It doesn’t happen with floated or cleared elements

That’s quite a list of exceptions, isn’t it? I always use either a top or a bottom margin, never both, so I wasn’t aware of the phenomenon until Wilfred Nas introduced me to it. It happens according to specification, but when you don’t expect it, it’s quite annoying.

There are plenty of use cases to imagine where you want to be able to control the collapsing of the margins, the biggest one being adjacent floats. Floats are often used to display a large number of blocks next and under each other. As we’ve seen in the above list, margin-collapse doesn’t work with horizontal margins or with floats, even though it would be incredibly useful, with developers now using negative margins on parent elements and other wierd tricks to get their layouts right.

Another use case would just be when you have positioned elements and still want margin-collapse on those elements.

Margin-collapse:collapse; #

in CSS3 we can pick which border-model we want to use. In CSS2 we already have border-collapse. Why not allow front-end developers to control the margin collapsing as well? Just add a margin-collapse property with values similar to border-collapse: collapse, separate and inherit. perhaps you even want to add margin-collapse-y and margin-collapse-x, but that might be overkill.

Either way, I think it would be a useful addition to CSS and it sounds like a better option to give developers the choice than to spec it in one particular way. What do you think?

I write about useful ideas for CSS more regularly, under the title Random CSS Thought. Feel free to check them out :)