margin

Create external spacing using physical or logical sides.

Overview

Examples

Add margin on every side

m-md adds 16px outside all four sides of the blue box. The outlined parent uses flow-root to keep the child’s vertical margins inside the parent’s extent; its own padding remains zero.

<div id="layout" class="flow-root w:17.5rem max-w:100%" role="group" aria-label="Available space">  <div id="target" class="h:4rem w:10rem m-md p-sm">External space</div></div>

Margin is transparent and is not part of the element’s painted border box. In ordinary block flow, adjoining vertical margins can collapse; the next example makes that visible.

Set one side

mt:*, mr:*, mb:* and ml:* select physical sides. In these normal-flow blocks, the first box’s 24px bottom margin and the second box’s 12px top margin collapse to 24px. Left and right margins remain independent.

<div id="layout" class="flow-root w:17.5rem max-w:100%" role="group" aria-label="Available space">  <div id="target" class="h:3rem w:10rem mb-lg ml-md p-sm">First block</div>  <div id="peer" class="h:3rem w:10rem mr-lg mt-sm p-sm">Second block</div></div>

The parent contains the children’s margins, but does not stop adjacent block siblings’ margins from collapsing with each other. Flex and Grid item margins do not collapse.

Set inline or block margins

mx:* sets inline margins; my:* sets block margins. These directions follow writing mode. The first box has 120px of free inline space, so mx:auto places 60px on each side. In the vertical example, mx-md maps to top/bottom and my-sm maps to right/left.

<!-- Automatic inline margins --><div id="layout" class="flow-root w:17.5rem max-w:100%" role="group" aria-label="Available space">  <div id="target" class="h:4rem w:10rem mx:auto my-sm p-sm">Centered</div></div>

<!-- Vertical logical margins --><div id="layout" class="flow-root width:10rem height:10rem writing-mode:vertical-rl" role="group" aria-label="Available space">  <div id="target" class="h:6rem w:4rem mx-md my-sm p-sm">Vertical</div></div>

Automatic margins need available space. If the block already fills the inline dimension, there is no free space for mx:auto to distribute. For one directional edge, logical start/end utilities also follow text direction.

Avoid margin for internal spacing

Padding creates space inside a component; gap separates its flex or grid children. This toolbar uses 16px of padding around two buttons and a 12px gap between them. Neither button has a margin.

<div id="layout" class="flex gap-sm w:17.5rem max-w:100% p-md" role="group" aria-label="Available space">  <button id="target" type="button" class="px-md py-sm border-width:0">Cancel</button>  <button id="peer" type="button" class="px-md py-sm border-width:0">Save</button></div>

Use margin to separate the toolbar from surrounding regions. Keep its internal spacing on the parent so adding or removing a child does not leave a trailing margin.

Apply conditionally

Resize past sm to add 16px of external space around the same 160 × 64px box. The parent contains the margins; the blue border-box dimensions stay unchanged.

<div id="layout" class="flow-root w:17.5rem max-w:100%" role="group" aria-label="Available space">  <div id="target" class="h:4rem w:10rem m:0 p-sm m-md@sm">Same box</div></div>