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: Applies margin to the top of an element.
- Right: Applies margin to the right of an element.
- Bottom: Applies margin to the bottom of an element.
- Left: Applies margin to the left of an element.
- Block: Applies margin to the top and bottom of an element.
- Inline: Applies margin to the left and right of an element.