Numeric spacing utilities: margin, padding, axis, single-direction, and flow spacing (steps 0–18)
CSS custom property values used by all spacing utilities
| Token | Value | Pixels | Visual |
|---|---|---|---|
| --space-0 | 0 | 0px | |
| --space-1 | 0.125rem | 2px | |
| --space-2 | 0.25rem | 4px | |
| --space-3 | 0.375rem | 6px | |
| --space-4 | 0.5rem | 8px | |
| --space-5 | 0.625rem | 10px | |
| --space-6 | 0.75rem | 12px | |
| --space-7 | 0.875rem | 14px | |
| --space-8 | 1rem | 16px | |
| --space-9 | 1.125rem | 18px | |
| --space-10 | 1.25rem | 20px | |
| --space-11 | 1.5rem | 24px | |
| --space-12 | 1.75rem | 28px | |
| --space-13 | 2rem | 32px | |
| --space-14 | 2.25rem | 36px | |
| --space-15 | 2.5rem | 40px | |
| --space-16 | 3rem | 48px | |
| --space-17 | 3.5rem | 56px | |
| --space-18 | 4rem | 64px |
Colour coding used throughout all demos below
Adds vertical spacing between sibling elements using .margin-flow. Applies margin-top: var(--space-3) (6px) to every direct child after the first.
Symmetric padding on all four sides: .padding-{step}
Vertical axis .padding-y-{step} (top + bottom) and horizontal axis .padding-x-{step} (left + right)
Individual side: .padding-t-{step}, .padding-b-{step}, .padding-l-{step}, .padding-r-{step}
Symmetric margin on all four sides: .margin-{step}
Vertical axis .margin-y-{step} (top + bottom) and horizontal axis .margin-x-{step} (left + right)
Individual side: .margin-t-{step}, .margin-b-{step}, .margin-l-{step}, .margin-r-{step}
Removes horizontal padding below the large breakpoint
Sets padding-left: 0 and padding-right: 0 at max-width: $breakpoint-lg
Class patterns for the numeric spacing system (steps 0–18)
| Pattern | CSS Property | Example |
|---|---|---|
| Flow | ||
| .margin-flow > * + * | margin-top | var(--space-3) = 6px |
| Padding — All Sides | ||
| .padding-{step} | padding | .padding-5 = 10px |
| Padding — Axis | ||
| .padding-y-{step} | padding-top, padding-bottom | .padding-y-4 = 8px |
| .padding-x-{step} | padding-left, padding-right | .padding-x-6 = 12px |
| Padding — Single Direction | ||
| .padding-t-{step} | padding-top | .padding-t-3 = 6px |
| .padding-b-{step} | padding-bottom | .padding-b-7 = 14px |
| .padding-l-{step} | padding-left | .padding-l-9 = 20px |
| .padding-r-{step} | padding-right | .padding-r-4 = 8px |
| Margin — All Sides | ||
| .margin-{step} | margin | .margin-5 = 10px |
| Margin — Axis | ||
| .margin-y-{step} | margin-top, margin-bottom | .margin-y-4 = 8px |
| .margin-x-{step} | margin-left, margin-right | .margin-x-6 = 12px |
| Margin — Single Direction | ||
| .margin-t-{step} | margin-top | .margin-t-2 = 4px |
| .margin-b-{step} | margin-bottom | .margin-b-7 = 14px |
| .margin-l-{step} | margin-left | .margin-l-3 = 6px |
| .margin-r-{step} | margin-right | .margin-r-3 = 6px |
| Responsive | ||
| .padding-x-0--sm | padding-left, padding-right | 0 (below $breakpoint-lg) |