ZUI — Spacing

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, sm, md, lg, 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, sm, md, lg, xl, 2xl, 3xl, 4xl

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