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 one-liner 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.

The Lobotomized Owl looks like this:

* + *

It gets it's name from looking like an owl face.

In CSS, the star means "everything." The plus sign means "adjacent sibling." So the Lobotomized Owl selects all things that have an adjacent sibling.

The scope of this technique is too large for more surgical use cases, so I tend to add more to it to define it better. For example, if I want a class that I can apply to a container to space everything evenly, it looks like this:

.owl-spacing--m > * + * {
margin-top: 1em;
}

The addition of the ">" means I'm telling it to only select DIRECT children that have an adjacent sibling. In other words, all 2nd level items inside the top level item, except the first one. And nothing else (such as children of those items).

The double dash on the class is a BEM naming convention that keeps everything organized when you have multiple types of styling options for the same class. Like this:

.owl-spacing--m > * + * {
margin-top: 1em;
}

.owl-spacing--l > * + * {
margin-top: 1.5em;
}

.owl-spacing--xl > * + * {
margin-top: 3em;
}

So you now have multiple spacing options using the same class structure. And yes, you can use whatever spacing you'd like. I'm most likely going to start using clamp() functions but you can use rem, em, etc. to keep things simple if you want.

This will work everywhere in Oxygen except on Sections, because Sections have an inner wrapper element. Thus, the technique would actually select the inner-wrapper element and apply the spacing to the top of it.

To get around this in Oxygen, we just need to exclude the main class when it's applied to a section and apply a separate structure when the class is applied to a section. That looks like this:

.ct-section.owl-spacing--s .ct-section-inner-wrap > * + *,
.owl-spacing--s:not(.ct-section) > * + * {
margin-top: .5vmax;
}

To apply this technique to a specific item, like a card, you just apply the technique to the top-level class of that item, like this:

.card > * + * {
margin-top: 1vmax;
}

Automatically, all direct children inside your card will be spaced evenly.

Here's the copy/paste for the generic Owl spacing classes to add to your stylesheet in Oxygen if you want to play with them:

/* Owl Spacing */

.ct-section.owl-spacing--s .ct-section-inner-wrap > * + *,
.owl-spacing--s:not(.ct-section) > * + * {
margin-top: .5vmax;
}

.ct-section.owl-spacing--m .ct-section-inner-wrap > * + *,
.owl-spacing--m:not(.ct-section) > * + * {
margin-top: 1vmax;
}

.ct-section.owl-spacing--l .ct-section-inner-wrap > * + *,
.owl-spacing--l:not(.ct-section) > * + * {
margin-top: 2vmax;
}

.ct-section.owl-spacing--xl .ct-section-inner-wrap > * + *,
.owl-spacing--xl:not(.ct-section) > * + * {
margin-top: 4vmax;
}

To use them, just apply ".owl-spacing--m" or any of the variations to a container. It's that simple!

And remember, you can use whatever your preferred measurement unit is for spacing. "vmax" works decently for this but you can also use clamp().