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 :)
Hi, I'm Kilian. I make my living building Polypane, the
browser for responsive web development and design. If you're reading this site, that's probably
interesting to you. Please try it out!
Related articles
CSS & HTML Design , 4 January 2017If you look above this text, you can see that the header of this blog has a sloped edge. It’s one of my favorite things about this site’s new design. The technique I used has a consistent angle regardless of screen size, can show background images and only needs one HTML element and no pseudo…
CSS & HTML , 3 July 2016 $ npm install postcss-dutch-stylesheets …
Design , 8 October 2019One term that keeps coming up in the design community as a stand-in for layout is “box model”, for example in “Why don’t design tools have the box model?” The CSS Box model is a well-defined term though, and it does not do layout.
If we keep referring to our imaginary perfect layout system in design…
margin-collapse-x
is not needed, since margin-collapse only appears on elements beneath each other, and not next to each other.The currently spec’ed margin collapse doesn’t do horizontal margin collapsing, no. My point is that it should, given the use case of adjacent floats :)
I’m also new to margin-collapse, but I think it may be really useful in text block elements, eliminating needless margins between headers and paragraphs. Granted, most developers reset default styles, but for a simple job, this would do just as well. Great article!
I was also introduced to collapsible margins recently, at first I was thinking this was a bug, but it’s a standard CSS specification :)
[…] Random CSS Thought: Margin-collape CSS property | KilianValkhof.com – I’ve known about border collapse, but not margin collapse. Here’s a nice article on the subject. […]
[…] – bookmarked by 1 members originally found by rwarsinger on 2008-07-21 Random CSS Thought: Margin-collape CSS property http://kilianvalkhof.com/2008/css-xhtml/random-css-thought-margin-collape-css-property/ – […]
[…] public links >> css2 Random CSS Thought: Margin-collape CSS property Saved by narutoluver44 on Tue 07-10-2008 list-style-type的用法 Saved by foureyedmonsters on […]
I wish it was default behaviour for all margins to always collapse in x and y! That would make web layouts so much simpler! Margins should simply be a way of saying “I want at least this much space between me and other elements.” This would clear up issues when you have nested boxes and you get margins on top of margins. Who wants that?! It is great that it works vertically but why is it impossible to do horizontally? Instead we have to create stupid exception classes for left and right-most items like the alpha and omega classes in the 960 grid system.
Yes they should. There is no reason why margins should not collapse horizontally too, except that the w3 commitee has decided that all pages on the web should use horizontally stacked layout and not use any columns until the final specs for columns are released in 2041.
And of course, a little more straightforward control (such as having a marign-collapse property) has never killed anyone.