Spacing
Utility classes for controlling margins and padding. These use the design system's spacing tokens for consistent sizing across breakpoints.
Margins
Auto Margins
| Class | Description |
|---|---|
.m-auto | margin: auto on all sides |
.my-auto | margin-top and margin-bottom: auto |
.mx-auto | margin-left and margin-right: auto (centers block elements) |
Horizontal Margins (mx)
| Class | Value |
|---|---|
.mx-xs | var(--spacing-h-xs) |
.mx-sm | var(--spacing-h-sm) |
.mx-md | var(--spacing-h-md) |
.mx-lg | var(--spacing-h-lg) |
.mx-xl | var(--spacing-h-xl) |
.mx-xxl | var(--spacing-h-xxl) |
Vertical Margins (my)
| Class | Value |
|---|---|
.my-xs | var(--spacing-v-xs) |
.my-sm | var(--spacing-v-sm) |
.my-md | var(--spacing-v-md) |
.my-lg | var(--spacing-v-lg) |
.my-xl | var(--spacing-v-xl) |
.my-xxl | var(--spacing-v-xxl) |
Margin Top (mt)
| Class | Value |
|---|---|
.mt-xs | var(--spacing-v-xs) |
.mt-sm | var(--spacing-v-sm) |
.mt-md | var(--spacing-v-md) |
.mt-lg | var(--spacing-v-lg) |
.mt-xl | var(--spacing-v-xl) |
.mt-xxl | var(--spacing-v-xxl) |
Margin Bottom (mb)
| Class | Value |
|---|---|
.mb-xs | var(--spacing-v-xs) |
.mb-sm | var(--spacing-v-sm) |
.mb-md | var(--spacing-v-md) |
.mb-lg | var(--spacing-v-lg) |
.mb-xl | var(--spacing-v-xl) |
.mb-xxl | var(--spacing-v-xxl) |
Margin Left (ml)
| Class | Value |
|---|---|
.ml-xs | var(--spacing-h-xs) |
.ml-sm | var(--spacing-h-sm) |
.ml-md | var(--spacing-h-md) |
.ml-lg | var(--spacing-h-lg) |
.ml-xl | var(--spacing-h-xl) |
.ml-xxl | var(--spacing-h-xxl) |
Margin Right (mr)
| Class | Value |
|---|---|
.mr-xs | var(--spacing-h-xs) |
.mr-sm | var(--spacing-h-sm) |
.mr-md | var(--spacing-h-md) |
.mr-lg | var(--spacing-h-lg) |
.mr-xl | var(--spacing-h-xl) |
.mr-xxl | var(--spacing-h-xxl) |
Padding
All Sides (p)
| Class | Value |
|---|---|
.p-xs | var(--spacing-xs) |
.p-sm | var(--spacing-sm) |
.p-md | var(--spacing-md) |
.p-lg | var(--spacing-lg) |
.p-xl | var(--spacing-xl) |
.p-xxl | var(--spacing-xxl) |
Vertical Padding (py)
| Class | Value |
|---|---|
.py-xs | var(--spacing-v-xs) |
.py-sm | var(--spacing-v-sm) |
.py-md | var(--spacing-v-md) |
.py-lg | var(--spacing-v-lg) |
.py-xl | var(--spacing-v-xl) |
.py-xxl | var(--spacing-v-xxl) |
Horizontal Padding (px)
| Class | Value |
|---|---|
.px-xs | var(--spacing-h-xs) |
.px-sm | var(--spacing-h-sm) |
.px-md | var(--spacing-h-md) |
.px-lg | var(--spacing-h-lg) |
.px-xl | var(--spacing-h-xl) |
.px-xxl | var(--spacing-h-xxl) |
note
Horizontal spacing uses --spacing-h-* tokens and vertical spacing uses --spacing-v-* tokens. These may have different values to account for the visual difference between horizontal and vertical space. The p-* shorthand uses the base --spacing-* tokens which apply evenly on all sides.