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 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 elements.…
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 :)
There are many different ways to achieve the same layout in CSS and HTML. Some are now frowned upon, like tables or floats, and others tend to overlap somewhat, but have a clear specific purpose, like Flexbox and Grid. But CSS has another layout engine, and it’s one that has been part of CSS since…
One 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…