Spacing

Margin, padding, and gap utility classes mapped to the fluid space scale.

Margin

Classes follow the pattern .m-{side}-{size}; where side is optional (x, y, t, r, b, l) and size comes from the space scale.

ClassProperty

.m-{size} margin

.mx-{size} margin-inline

.my-{size} margin-block

.mt-{size} margin-block-start

.mr-{size} margin-inline-end

.mb-{size} margin-block-end

.ml-{size} margin-inline-start

0, auto, 2xs, xs, s, m, l, xl, 2xl, 3xl, 4xl

<div class="mt-xl mb-m mx-auto">Centred with vertical spacing</div>

Same pattern as margin: .p-{side}-{size};.

ClassProperty

.p-{size} padding

.px-{size} padding-inline

.py-{size} padding-block

.pt-{size} padding-block-start

.pr-{size} padding-inline-end

.pb-{size} padding-block-end

.pl-{size} padding-inline-start

<section class="px-m py-xl">Horizontal and vertical padding</section>

Gap utilities for flex and grid containers: .gap-{side}-{size};, .gapx-{side}-{size}; (column-gap), .gapy-{side}-{size}; (row-gap).

ClassProperty

.gap-{size} gap

.gapx-{size} column-gap

.gapy-{size} row-gap

0, 2xs, xs, s, m, l, xl, 2xl, 3xl, 4xl

<div class="flex flex-wrap gap-m">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>