Category: Spacing

Back to Docs

Navigation

Margin Classes

Margin classes allow you to add space to the outside of an element to create space between that element and other elements around it.

Margins use the Automatic spacing system, so all margin sizes are automatically responsive, follow a mathematical scale, and match exactly to other types of spacing such as padding and gaps.

All margin classes follow the convention: .margin-[direction]–[size] with size being standard t-shirt sizes (xs – xxl). Available directions are top, right, bottom, and left.