margin

Setting the margin area on all four sides of an element.

Overview

Examples

Add margin on every side

Use m:* to create space outside an element. Margin separates the element from neighboring boxes; it is not painted by the element background.

<aside class="m:md b:1px|solid|gray-20 bg:white">  Detached content</aside>

@layer theme {  :root {    --spacing-md: 1rem  }}@layer utilities {  .m\:md {    margin: var(--spacing-md)  }}

Set one side

Use mt:*, mr:*, mb:*, and ml:* for one physical side. One-side margins are useful for vertical rhythm between headings, paragraphs, media, and actions.

<section>  <h2 class="mb:sm mt:lg">Billing</h2>  <p class="m:0">Manage invoices and payment details.</p></section>

Set horizontal or vertical margins

Use mx:* for inline margins and my:* for block margins.

<main class="w:full max-w:5xl mx:auto my:lg">  ...</main>

mx:auto is the standard way to center a block with a constrained width. The element still needs a width or maximum width that leaves free inline space.

Avoid margin for internal spacing

Use padding for space inside a component and gap for spacing between flex or grid children. Reserve margin for relationships between separate layout regions.

<div class="flex gap:md">  <button>Cancel</button>  <button>Save</button></div>

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<div class="m:0:hover m:lg@dark m:0@print m:md@sm">...</div>

Vertical margins can collapse in normal block flow, following native CSS behavior. Padding and gap do not collapse.