Padding

Quick reference

Examples

All sides

Use p-{size} to apply padding to every side of an element:

<div class="p-md">Padded on all sides by var(--gap-md).</div>

Inline / block axes

Use px-{size} for horizontal padding (inline axis) and py-{size} for vertical (block axis). These follow logical properties and flip automatically in RTL languages.

<div class="px-lg py-md">Wider horizontally than vertically.</div>

A single side

Each physical side has its own utility: pt, pr, pb, pl.

<div class="pt-sm pb-lg">Tight on top, generous on bottom.</div>

Spacing scale

Padding utilities reference the semantic gap tokens. Five named sizes:

Change --spacing-interval to retune every padding utility at once. See Foundations → Spacing → Global interval.

Using a custom value

For padding values outside the semantic scale, reach for the underlying step scale:

.tight-card {
  padding: var(--step-3); /* 0.75rem, not on the gap scale */
}

For one-off values that don't track the interval at all, write the literal:

.precise-offset {
  padding-top: 13px;
}

The semantic utilities should cover most cases. Reach for step or literal values only when the design genuinely needs something off-grid.

Customizing the scale

Override the gap tokens in your project root to retune what the utilities apply:

:root {
  --gap-md: var(--step-8); /* bump --gap-md from 24px to 32px */
}

Every p-md, px-md, py-md, etc. now applies 32px instead of 24px. Components consuming --gap-md directly track the change too.

To add a new size like p-2xl, see the adding a semantic gap accordion on the Spacing page.