After some debate with Prashant from Mintpages, we came up with a new utopia in CSS design. Now, this is just a random thought, but wouldn’t it be awesome to be able to use (simple) mathematics in your CSS? I’m not talking about “new techniques” or anything, just about closing your eyes and imagining all…
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.
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
inherit. perhaps you even want to add
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 :)
In my…quest..to use as less code as possible, i ran into another random CSS thought. Now, this one is a bit more abstract, and sort of hard to explain, so please bare with my while I try. I’d appreciate it if you would want to point out when any of my descriptions are unclear in the…
Vertical floating is an idea I’ve had for some time now, but only recently really had a need for. Float:left; and float:right; are often used to float images or clear certain parts of the background, making the text flow nicely around it. And it’s used for good reason, it is a whole lot cleaner then…