A utility CSS class for removing margins on first and last child elements.

I’ve recently been developing sites using a utility-based approach with my CSS and I’m kinda loving the flexibility that comes with this paradigm.

One particularly useful class I seem to use a lot is one that removes margins from the first and last elements within a container. I use this a lot because I tend to prefer to use padding to control the inner spacing in a box and margins can often get in the way of this.

The straight-up CSS approach

Using SCSS for a little more flexibility

This is how I work it as I’m almost always working with SCSS. By having the additional mixin, I’m able to pull the approach into any other existing classes where adding a utility class isn’t feasible.

One last thing…

If you liked this article, I'd be incredibly grateful if you tweeted about it.

Also, I don't send emails often but when I do, I try to fill them full of useful goodies. If you like code snippets & dev tips, join my mailing list. There's no catch but I'll probably want to tell you about any new plugins & tools I build.