Whitespce

We often need to apply margins or padding to individual elements. These utilities should be exclusively used for this type of spacing.

To add space to any element we add a class of .u-{type}{direction}--{amount}. For example, if we wanted to add 32px of margin below an element, we would add a class of .u-mb--large.

Type

Margin: m
Padding: p

Direction

All: a
Vertical: v
Horizontal: h
Top: t
Right: r
Bottom: b
Left: l

Amount

0px: remove
4px: xsmall
8px: small
16px: regular
24px: medium
32px: large
64px: xlarge

Example