Post

I’m glad that we share the same opinion 😊 it’s indeed hacky and requires more maintenance for complex layouts.

📌

I use a variation of @bell.bz's good ol' flow class and then override with a utility class as needed rather than putting the margin in the styles of the element.

Animating the gap would be nice. Say you have a flex-row container, where you can add elements that have their width animate (grow) on insert. When the element is added, it causes a shift due to the extra gap added. Having a way to grow that gap would keep the insert animation smooth.

Now that I'm thinking about it, it would be nice to have a selector for stuff between two siblings. That would not be easy to implement, though, based on the time we had to wait for :has…

That's a very good point! I think we need a way to select two elements and customize the gap between them. The gap above thing will probably cause more confusion.

You're doing good work with your suggestions. I'd love to have more control over gaps! :)

Happy to see this discussion. I usually add "spacer" components to customize gaps like that as my current workaround. A standardized approach would be nice.

Should be taught in kindergarten.

Oh yes! I remember the same thing happened when I wrote about the CSS behind the new Facebook. I did it in one go in the morning and just hit publish! Good times.

maybe there is something to try with margin-trim (still experimentation btw) developer.mozilla.org/en-US/docs/W...

That's an interesting thought! Thanks for sharing.

I've been thinking in the same terms. Having to combine gap and margins feels a bit like an ugly hack. gap-before makes sense, but maybe something with -start and -end would be more consistent with other CSS props (margin-block-start etc)