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 bg:white b:1px|solid|gray-20">    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="mt:lg mb:sm">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:md@sm m:lg@dark m:0@print">...</div>

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