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.
There are some more advanced rules attached to this:
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.
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 :)
If 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…
$ npm install postcss-dutch-stylesheets …
For a long time I’ve wanted to like functional CSS systems like Tachyons and Tailwind. The concepts behind them are really appealing to me. Using short names for CSS property:values saves a lot of typing (hello Emmet, nice to see you again!), but more importantly by limiting the amount of design choices you can make,…
margin-collapse-xis 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.