margin-bottom
Sets the bottom outer spacing of an element. Use the mb prefix followed by a value with unit. The most frequently used margin direction for paragraph spacing, heading bottom margins, vertical card spacing, etc.
Class Patterns
Prefix mb + value + unit. Use px for under 20px, rem(1rem = 10px) for 20px and above.
| Class | CSS Output | Description |
|---|---|---|
mb4px | margin-bottom: 4px | minimum spacing |
mb8px | margin-bottom: 8px | Narrow spacing |
mb12px | margin-bottom: 12px | Default spacing |
mb16px | margin-bottom: 16px | Generous spacing |
mb2rem | margin-bottom: 2rem (20px) | rem unit start |
mb2-4rem | margin-bottom: 2.4rem (24px) | Decimals are expressed with hyphens |
mb3-2rem | margin-bottom: 3.2rem (32px) | Wide spacing |
mb4rem | margin-bottom: 4rem (40px) | Between-section spacing |
mba | margin-bottom: auto | Auto margin (used for flexbox/grid alignment) |
Unit Comparison
Comparison of the same size expressed in px and rem. Based on: html { font-size: 10px }
| Size | px class | rem class |
|---|---|---|
| 8px | mb8px | mb0-8rem |
| 12px | mb12px | mb1-2rem |
| 16px | mb16px | mb1-6rem |
| 20px | mb20px | mb2rem |
| 24px | mb24px | mb2-4rem |
| 32px | mb32px | mb3-2rem |
| 40px | mb40px | mb4rem |
Common Values
| Class | Actual size | Usage |
|---|---|---|
mb4px | 4px | Fine gap between title and subtitle |
mb8px | 8px | Narrow gap between paragraphs |
mb16px | 16px | Default gap below heading |
mb2rem | 20px | Gap between content blocks |
mb3-2rem | 32px | Gap below tables and demo areas |
mb4rem | 40px | Page section ending gap |
Code Examples
<!-- Gap below title -->
<h1 class="mb16px">Page Title</h1>
<p class="mb8px">First paragraph</p>
<p class="mb8px">Second paragraph</p>
<!-- Form field gap -->
<div>
<label class="db mb4px">Name</label>
<input type="text" class="w100p mb16px" />
<label class="db mb4px">Email</label>
<input type="email" class="w100p mb16px" />
<button>Submit</button>
</div>
<!-- Card list (using mb instead of gap) -->
<div class="mb2rem bg18181B p2rem br8px">Card 1</div>
<div class="mb2rem bg18181B p2rem br8px">Card 2</div>
<div class="bg18181B p2rem br8px">Card 3 (no mb on last)</div>Auto Value
mba applies margin-bottom: auto. Used to push elements upward in flex containers.
<!-- Push element up in flex container -->
<div class="df fdc h40rem">
<header class="mba p2rem bg18181B">Pushed up (always at top)</header>
<main class="p2rem">Takes remaining space</main>
</div>Negative Margin (neg- prefix)
Use neg-mb to apply negative margin-bottom. Used to reduce or overlap spacing with the element below.
| Class | CSS | Description |
|---|---|---|
neg-mb8px | margin-bottom: -8px | 8px overlap with element below |
neg-mb16px | margin-bottom: -16px | 16px overlap with element below |
neg-mb2rem | margin-bottom: -2rem | 20px overlap with element below |
<!-- Element overlap effect -->
<div class="bg6366F1 p2rem cFFFFFF neg-mb16px">
Overlaps 16px below
</div>
<div class="bg18181B p2rem pt3-2rem cFAFAFA">
Overlapping element (compensated with pt)
</div>Tips & Notes
Margin Collapse
mb and the next element's mt collapse. For example, mb2rem + mt2rem results in 20px, not 40px. No collapse occurs in flex/grid.
Prefer gap over mb
For list item spacing, using df fdc gap8px on the parent is cleaner since you don't need to handle the last element.