Margin

Quick reference

Examples

All sides

<div class="m-md">Margin on all sides at var(--gap-md).</div>

Inline / block axes

mx-{size} for horizontal margin, my-{size} for vertical. Logical properties; they flip in RTL.

<div class="mx-lg my-md">Generous horizontal margin, modest vertical.</div>

Centering with auto

The -auto variants set the relevant margin to auto. Most common pattern: mx-auto to horizontally center a fixed-width block.

<div class="mx-auto" style="width: var(--container)">Centered horizontally.</div>

mt-auto is useful inside a flex column to push an element to the bottom; ml-auto does the same horizontally.

<div class="flex">
  <span>Left-aligned</span>
  <span class="ml-auto">Pushed right</span>
</div>

A single side

<div class="mt-lg mb-sm">Lots of room above, a little below.</div>

Spacing scale

Same scale as Padding. The five named semantic gap tokens.

Negative margins

Zazz doesn't ship negative-margin utilities by default. If a layout calls for negative margin, apply it directly in CSS:

.bleed-edge {
  margin-inline: calc(var(--gap-md) * -1);
}

Most cases that look like they need negative margins are better solved by adjusting padding on the container or by using gap on a flex/grid parent.

Using a custom value

For sizes off the semantic scale, reach for step tokens directly:

.detail-label {
  margin-bottom: var(--step-3); /* 0.75rem */
}

Customizing the scale

The margin utilities consume the same --gap-* tokens as padding and gap. Overriding a gap token retunes margin, padding, and gap together. See Padding → Customizing the scale.