margin
Sets the outer spacing of an element. Control each direction individually with directional prefixes (mt, mr, mb, ml), or set all at once with m. Use mxa for horizontal center alignment.
Class List
Append a value with unit after the prefix. Use px for values under 20px, and rem (1rem = 10px) for 20px and above.
| Prefix | CSS Property | Example | CSS Output |
|---|---|---|---|
m | margin | m16px | margin: 16px |
m | margin | m2rem | margin: 2rem (20px) |
mt | margin-top | mt8px | margin-top: 8px |
mr | margin-right | mr16px | margin-right: 16px |
mb | margin-bottom | mb2-4rem | margin-bottom: 2.4rem (24px) |
ml | margin-left | ml4rem | margin-left: 4rem (40px) |
m | margin (% 단위) | m5p | margin: 5% |
mt | margin-top (em) | mt1em | margin-top: 1em |
Auto Values
Directional auto values and mxa which applies auto to both left and right simultaneously.
| Class | CSS | Description |
|---|---|---|
mta | margin-top: auto | push down in flex container |
mra | margin-right: auto | push element to the left |
mba | margin-bottom: auto | push up in flex container |
mla | margin-left: auto | push element to the right |
mxa | margin-left: auto; margin-right: auto | horizontal center alignment (most commonly used) |
Unit Comparison
Examples of the same spacing expressed in px, rem, %, and em. Based on: html { font-size: 10px }
| <tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">spacing | px | rem | % | em |
|---|---|---|---|---|
| 8px | m8px | m0-8rem | m1p | m0-8em |
| 12px | m12px | m1-2rem | m2p | m1-2em |
| 16px | m16px | m1-6rem | m3p | m1-6em |
| 20px | m20px | m2rem | m5p | m2em |
| 32px | m32px | m3-2rem | m8p | m3-2em |
| 40px | m40px | m4rem | m10p | m4em |
Visual Comparison
See how the outer spacing of an element changes depending on the margin value.
margin: 0 (default) —
no margin; flush with parent
margin: 8px — m8px
8px spacing on all sides
margin: 16px — m16px
16px spacing on all sides
margin-top: 2rem (20px) — mt2rem
20px spacing on top only
margin-left: 4rem (40px) — ml4rem
40px spacing on left only
mxa — Horizontal Center Alignment
mxa is shorthand for margin-left: auto; margin-right: auto, the most commonly used pattern for horizontally centering block elements. A width must be set for it to work.
<!-- Page container (most common pattern) -->
<div class="mxa maxw120rem px2rem">
<h1>Page content</h1>
<p>Max width 1200px, center-aligned with auto margin</p>
</div>
<!-- Center-aligned card -->
<div class="mxa maxw40rem bg18181B p2rem br8px">
<h2>Center-aligned card</h2>
<p>maxw + mxa Combination</p>
</div>
<!-- Center alignment at various widths -->
<div class="mxa maxw60rem mb2rem">Wide container</div>
<div class="mxa maxw40rem mb2rem">Medium container</div>
<div class="mxa maxw24rem">Narrow container</div>mxa in action
Directional margin
Control each direction individually with mt, mr, mb, and ml.
<!-- Section gap -->
<section class="mt4rem mb4rem">
<h2 class="mb16px">Section Title</h2>
<p class="mb8px">First paragraph</p>
<p>Second paragraph</p>
</section>
<!-- Push element right (flex container) -->
<div class="df aic">
<span>Logo</span>
<nav class="mla">Pushed right (margin-left: auto)</nav>
</div>
<!-- List indentation -->
<ul class="ml2-4rem">
<li class="mb8px">Item 1</li>
<li class="mb8px">Item 2</li>
<li>Item 3</li>
</ul>Directional margin visualization
mt2rem (top 20px)
mb2rem (bottom 20px)
ml2rem (left 20px)
mr2rem (right 20px)
Negative Margin (neg- prefix)
Add the neg- prefix to apply negative margin. Used to pull elements in the opposite direction or create overlap effects.
<!-- Full width by canceling parent padding -->
<div class="p2rem">
<div class="neg-ml2rem neg-mr2rem bg6366F1 p16px">
Cancels parent left/right padding with negative margin
</div>
</div>
<!-- Overlap effect (avatar stack) -->
<div class="df">
<div class="w4rem h4rem br50p bg6366F1 b2pxsolidFFFFFF"></div>
<div class="w4rem h4rem br50p bg34D399 b2pxsolidFFFFFF neg-ml12px"></div>
<div class="w4rem h4rem br50p bgFBBF24 b2pxsolidFFFFFF neg-ml12px"></div>
</div>| Class | CSS | Description |
|---|---|---|
neg-mt10px | margin-top: -10px | pull up 10px |
neg-mt2rem | margin-top: -2rem | pull up 20px |
neg-ml16px | margin-left: -16px | pull left 16px |
neg-mb8px | margin-bottom: -8px | overlap bottom element by 8px |
neg-mr12px | margin-right: -12px | overlap right element by 12px |
Caution
Be careful with negative margins as elements may overlap. Especially when using neg-mt, elements may overflow outside their bounds if the parent lacks oh (overflow: hidden).
Tips & Notes
Use multiples of 4
For consistent rhythm, use multiples of 4 for margin values: 4px, 8px, 12px, 16px, 2rem(20px), 2-4rem(24px), 3-2rem(32px), 4rem(40px)
Horizontal center with mxa
To center a block element, combine mxa with maxw. The most common pattern for page containers: mxa maxw120rem px2rem
Beware of Margin Collapse
Vertical margins on block elements collapse. For example, if an element with mb2rem is followed by one with mt2rem, the gap is 20px, not 40px. Collapse does not occur inside flex/grid containers, so using gap is recommended.
Shorthand decomposition: m (margin) is internally decomposed into margin-top/right/bottom/left in all 4 directions. When using m2rem mt0, only margin-top is precisely overridden to 0. Multi-values are also decomposed following CSS shorthand rules: m10px-20px (2 values) → top/bottom 10px, right/left 20px, m10px-20px-30px (3 values) → top 10px, right/left 20px, bottom 30px, m10px-20px-30px-40px (4 values) → top 10px, right 20px, bottom 30px, left 40px.