Spacing

Margin and padding utility classes built on the spacing scale.

Spacing scale

All spacing utilities are derived from the same token scale. The number suffix maps directly to the --na-space-{n} custom property.

Token	Value	px (at 16px base)
`--na-space-1`	0.25rem	4px
`--na-space-2`	0.5rem	8px
`--na-space-3`	0.75rem	12px
`--na-space-4`	1rem	16px
`--na-space-5`	1.25rem	20px
`--na-space-6`	1.5rem	24px
`--na-space-8`	2rem	32px
`--na-space-10`	2.5rem	40px
`--na-space-12`	3rem	48px
`--na-space-16`	4rem	64px
`--na-space-20`	5rem	80px
`--na-space-24`	6rem	96px

Margin

Pattern: na-margin-{n} for all sides, na-margin-x-{n} for inline (left/right), na-margin-y-{n} for block (top/bottom), and individual sides with na-mt, na-mr, na-mb, na-ml.

na-margin-4 - 1rem all sides

na-margin-x-8 - 2rem left & right

na-margin-y-6 - 1.5rem top & bottom

na-margin-top-8 na-margin-bottom-2

na-margin-left-auto ? pushed right

<div class="na-margin-4">...</div>          <!-- all sides -->
<div class="na-margin-x-8">...</div>         <!-- left + right -->
<div class="na-margin-y-6">...</div>         <!-- top + bottom -->
<div class="na-margin-top-4 na-margin-bottom-6">...</div> <!-- top + bottom individually -->
<div class="na-margin-x-auto">...</div>      <!-- centred horizontally -->
<div class="na-margin-left-auto">...</div>      <!-- pushed to the right -->

Margin reference

Class	Property	Scale
`na-margin-{n}`	`margin`	0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, auto
`na-margin-x-{n}`	`margin-inline`
`na-margin-y-{n}`	`margin-block`
`na-margin-top-{n}`	`margin-top`
`na-margin-right-{n}`	`margin-right`
`na-margin-bottom-{n}`	`margin-bottom`
`na-margin-left-{n}`	`margin-left`

Padding

Pattern: na-padding-{n} for all sides, na-padding-x-{n} / na-padding-y-{n} for axes, and na-pt, na-pr, na-pb, na-pl for individual sides.

na-padding-6 - 1.5rem all sides

na-padding-x-8 na-padding-y-2

na-padding-top-6 na-padding-bottom-2 na-padding-left-4 na-padding-right-8

<div class="na-padding-4">...</div>               <!-- all sides -->
<div class="na-padding-x-6 na-padding-y-3">...</div>      <!-- axes -->
<div class="na-padding-top-4 na-padding-bottom-8 na-padding-left-6">...</div> <!-- individual sides -->

Padding reference

Class	Property	Scale
`na-padding-{n}`	`padding`	0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24
`na-padding-x-{n}`	`padding-inline`
`na-padding-y-{n}`	`padding-block`
`na-padding-top-{n}`	`padding-top`
`na-padding-right-{n}`	`padding-right`
`na-padding-bottom-{n}`	`padding-bottom`
`na-padding-left-{n}`	`padding-left`