Spacing

Spacing utilities set padding, margin, and gap from the space token scale. All spacing utilities support responsive breakpoint suffixes.

Padding

Use p-* for all sides, px-*/py-* for axes, and pt-*/pb-*/ps-*/pe-* for individual sides. Values are 0, half, and 1 through 4.

<div class="border rounded-sm p-1 mb-3">p-1</div>
<div class="border rounded-sm p-2 mb-3">p-2</div>
<div class="border rounded-sm p-3 mb-3">p-3</div>
<div class="border rounded-sm p-4 mb-3">p-4</div>
<div class="border rounded-sm px-4 py-2 mb-3">px-4 py-2</div>
<div class="border rounded-sm pt-4 pb-1">pt-4 pb-1</div>

p-1

p-2

p-3

p-4

px-4 py-2

pt-4 pb-1

Margin

Margin utilities include an auto value for centering. Use m-* for all sides, mx-*/my-* for axes, and mt-*/mb-*/ms-*/me-* for individual sides.

<div class="border rounded-sm p-2">Reference block</div>
<div class="border rounded-sm p-2 mt-3">mt-3</div>
<div class="border rounded-sm p-2 mt-4">mt-4</div>
<div class="border rounded-sm p-2 mx-auto w-50">mx-auto w-50 — centred</div>

Reference block

mt-3

mt-4

mx-auto w-50 — centred

Negative margin

Negative margin utilities pull elements outside their normal box. Use -m-* for all sides, -mx-* for inline, and -my-* for block. Values are 1px and 1 through 4. All support responsive breakpoint suffixes.

<div class="border p-3 mb-3">
  <div class="bg-primary-subtle p-2 -mx-1">-mx-1 pulls into parent padding</div>
</div>

<div class="border p-3">
  <div class="bg-primary-subtle p-2 -mt-3">-mt-3 overlaps parent top</div>
</div>

-mx-1 pulls into parent padding

-mt-3 overlaps parent top

Gap

Gap utilities set gap, row-gap, or column-gap on flex or grid parents. Use gap-*, row-gap-*, and col-gap-*.

<div class="d-flex gap-1 mb-3">
  <span class="bg-surface-raised rounded-sm p-2">One</span>
  <span class="bg-surface-raised rounded-sm p-2">Two</span>
  <span class="bg-surface-raised rounded-sm p-2">Three</span>
</div>

<div class="d-flex gap-4 mb-3">
  <span class="bg-surface-raised rounded-sm p-2">One</span>
  <span class="bg-surface-raised rounded-sm p-2">Two</span>
  <span class="bg-surface-raised rounded-sm p-2">Three</span>
</div>

<div class="ln-grid ln-grid--cols-3 row-gap-1 col-gap-4">
  <span class="bg-surface-raised rounded-sm p-2 text-center">A</span>
  <span class="bg-surface-raised rounded-sm p-2 text-center">B</span>
  <span class="bg-surface-raised rounded-sm p-2 text-center">C</span>
  <span class="bg-surface-raised rounded-sm p-2 text-center">D</span>
  <span class="bg-surface-raised rounded-sm p-2 text-center">E</span>
  <span class="bg-surface-raised rounded-sm p-2 text-center">F</span>
</div>

OneTwoThree

ABCDEF

Responsive

All spacing utilities generate responsive variants: .p-*@sm, .mt-*@md, .gap-*@lg, etc.

<div class="border rounded-sm p-2 mt-0 mt-4@md mb-3">No top margin on mobile, mt-4 from md up</div>
<div class="d-flex flex-column flex-row@md gap-1 gap-4@lg">
  <span class="bg-surface-raised rounded-sm p-2">Item</span>
  <span class="bg-surface-raised rounded-sm p-2">Item</span>
  <span class="bg-surface-raised rounded-sm p-2">Item</span>
</div>

No top margin on mobile, mt-4 from md up

ItemItemItem

Reference

Class	Property	Responsive
`.p-{0\|half\|1–4}`	`padding (all sides)`	Yes
`.pt-{0\|half\|1–4}`	`padding-top`	Yes
`.pb-{0\|half\|1–4}`	`padding-bottom`	Yes
`.ps-{0\|half\|1–4}`	`padding-left`	Yes
`.pe-{0\|half\|1–4}`	`padding-right`	Yes
`.px-{0\|half\|1–4}`	`padding-inline`	Yes
`.py-{0\|half\|1–4}`	`padding-block`	Yes
`.m-{0\|half\|1–4\|auto}`	`margin (all sides)`	Yes
`.mt-{0\|half\|1–4\|auto}`	`margin-top`	Yes
`.mb-{0\|half\|1–4\|auto}`	`margin-bottom`	Yes
`.ms-{0\|half\|1–4\|auto}`	`margin-left`	Yes
`.me-{0\|half\|1–4\|auto}`	`margin-right`	Yes
`.mx-{0\|half\|1–4\|auto}`	`margin-inline`	Yes
`.my-{0\|half\|1–4\|auto}`	`margin-block`	Yes
`.-m-{1px\|1–4}`	`margin (all sides)`	Yes
`.-mx-{1px\|1–4}`	`margin-inline`	Yes
`.-my-{1px\|1–4}`	`margin-block`	Yes
`.gap-{0\|half\|1–4}`	`gap`	Yes
`.row-gap-{0\|half\|1–4}`	`row-gap`	Yes
`.col-gap-{0\|half\|1–4}`	`column-gap`	Yes