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.

Can I create custom margin classes?

Yes, you can quickly and easily create custom margin classes using the fluid() function. Or you can simply use a calc().