Margin

Utilities for controlling an element’s margin (space outside an element).

Quick reference

Scale: 0 · xs · sm · md · lg · xl · 2xl · 3xl · 4xl (maps to --af-space-0…8).

Class	Styles
af-m-*	margin: var(--af-space-*)
af-mx-*	margin-inline: var(--af-space-*)
af-my-*	margin-block: var(--af-space-*)
af-mt-*	margin-top: var(--af-space-*)
af-mr-*	margin-right: var(--af-space-*)
af-mb-*	margin-bottom: var(--af-space-*)
af-ml-*	margin-left: var(--af-space-*)
af-mx-auto	margin-inline: auto

Examples

Basic margin

Use af-m-* utilities like af-m-md and af-m-lg to control margin on all sides:

Basic margin

af-m-lg

<div class="af-bg-primary-soft af-radius-sm af-m-lg af-p-sm">
  af-m-lg
</div>

Auto centering

Use af-mx-auto to center a block horizontally:

Auto centering

af-mx-auto

<div class="af-bg-primary-soft af-radius-sm af-w-full" style="max-width: 18rem;">
  <div class="af-mx-auto af-p-sm" style="max-width: 12rem;">
    af-mx-auto
  </div>
</div>

Responsive design

Prefix a margin utility with a breakpoint suffix to apply it from that breakpoint and up:

<div class="af-mx-auto@lg">
  <!-- ... -->
</div>

See Responsive Suffix for syntax and breakpoints.

Customizing your theme

Margin utilities are driven by the --af-space-* tokens. Override them in CSS — no rebuild required:

:root {
  --af-space-sm: 0.5rem;
  --af-space-md: 1rem;
  --af-space-lg: 1.5rem;
}

See Theming and Tokens for the full spacing scale.

Related

• Padding