Spacing

Spacing scale

ArchCSS uses a 7-step scale. The base unit is $spacer: 1rem (16px). Steps below and above multiply or divide that base.

Margin

Apply margin to any side or axis with a shorthand class. Replace {n} with a token from the scale (0–6).

<!-- 1rem margin on all sides -->
<div class="m-2">...</div>

<!-- 1.5rem top margin, 0.5rem bottom margin -->
<p class="mt-3 mb-1">...</p>

<!-- 2rem left and right margin -->
<section class="mx-4">...</section>

Margin auto

Use auto margin utilities to horizontally or vertically center elements within their container.

<!-- Center a block element horizontally -->
<div class="mx-auto" style="width:200px">Centered</div>

<!-- Push all margin to the left (right-align) -->
<div class="ml-auto">Right-aligned</div>

<!-- Push all margin to the right (left-align inside flex) -->
<div class="mr-auto">Left-aligned</div>

Padding

Apply internal spacing with padding utilities. Same scale and directional shorthand as margin.

<!-- 1.5rem padding on all sides -->
<div class="p-3">...</div>

<!-- 2rem horizontal, 1rem vertical -->
<button class="px-4 py-2">Click me</button>

<!-- 0.5rem top, 1.5rem bottom -->
<header class="pt-1 pb-3">...</header>

Gap

Control the spacing between flex or grid children using gap utilities. Same scale as margin and padding.

<!-- 1rem gap between flex children -->
<div class="flex g-2">
  <div>Box A</div>
  <div>Box B</div>
  <div>Box C</div>
</div>

<!-- 2rem column gap, 1rem row gap in a grid -->
<div class="grid gx-4 gy-2">
  <div>Item</div>
  <div>Item</div>
</div>

Named gap presets

Descriptive gap sizes that reference the configured grid gutter instead of the spacing scale.

<!-- Tight, gutter-size gap -->
<div class="flex normal-gap">
  <div>Box A</div>
  <div>Box B</div>
</div>

<!-- Preset scoped to one axis -->
<div class="grid large-gap-y">
  <div>Item</div>
</div>

<!-- Remove the gap entirely -->
<div class="flex no-gap">
  <div>Box A</div>
  <div>Box B</div>
</div>

Each preset also ships -x and -y variants for one-axis gaps, e.g. .large-gap-y. Presets use the final $grid-gutter-width value, so they stay in sync when the gutter token changes.

Responsive spacing

All spacing utilities support responsive prefixes. Stack breakpoint variants to adjust spacing at different viewport widths - ArchCSS is mobile-first, so unprefixed classes apply at all sizes.

<!-- Small padding on mobile, larger on tablet and desktop -->
<section class="px-2 md:px-4 lg:px-6 py-3 lg:py-6">
  <h1>Responsive section</h1>
</section>

<!-- Tight margin on mobile, auto-centered from md up -->
<div class="mx-2 md:mx-auto" style="max-width:720px">
  <p>Centered content</p>
</div>

<!-- Responsive gap in a flex row -->
<div class="flex g-1 md:g-3 lg:g-5">
  <div>Card</div>
  <div>Card</div>
  <div>Card</div>
</div>

Mobile-first. A class like md:px-4 applies from the md breakpoint (768px) and wider. Write the smallest spacing first, then layer larger values with breakpoint prefixes.