More detail and code snippets here: https://digitalambition.co/watch/perf...

There are A LOT of ways to arrive at the same outcome in web design, but some are objectively better than others. One principle I try to follow is: less code, less individual styling, etc. Keep things as simple as possible, right?

So when you're faced with needing to evenly space elements inside a div, section, card, etc. in Oxygen, there's a oneliner trick you can use to achieve this without having to target and style every element individually.

Even better, we can assign this trick to a class so that it can be used over and over again anywhere you need it. Or, if there's a class like (.card) that you're going to be using throughout your site, you can just apply this technique to that class.

The trick is based on a CSS technique called the Lobotomized Owl, which allows you to select any direct children of a parent element that also have an adjacent sibling. That's a mouthful, but essentially it means you're selecting everything inside of a container except for the very first thing.

By doing this, you can apply spacing to the top of the selected elements which effectively applies even spacing to all elements without adding extra spacing to the top or bottom.

Watch to learn how!