Spacing utilities

Margin

Set the margin of an element. You can use multiple margin utilities at the same time to adjust each dimension individually.


    u-margin-[dimension]-[size](@[breakpoint])

dimension
The dimension as one of these values:
- top, right, bottom or left.
- h: horizontal (for left and right).
- v: vertical (for top and bottom).
- all: all sides
size
The size as one of these value:
- Responsive scale: 2xs, xs, s, m, l, 2xl, gutter, outer
- none: Remove margins
- auto: Auto margins
breakpoint (optional)
Apply the utility from the specified breakpoint and larger.

Item

Item with margins

Item

u-margin-top-l u-margin-bottom-gutter u-margin-bottom-m@medium"

Centered with auto margin

u-margin-h-auto

Set the padding of an element. You can use multiple padding utilities at the same time to adjust each dimension individually.


    u-padding-[dimension]-[size](@[breakpoint])

dimension
The dimension as one of these values:
- top, right, bottom or left.
- h: horizontal (for left and right).
- v: vertical (for top and bottom).
- all: all sides
size
The size as one of these value:
- Responsive scale: 2xs, xs, s, m, l, 2xl, gutter, outer
- none: Remove padding
- auto: Auto padding
breakpoint (optional)
Apply the utility from the specified breakpoint and larger.

Item with padding

u-padding-v-2xs u-padding-left-gutter u-padding-left-m@medium