margin-top
Sets the outer spacing on the top side of an element. Use the prefix mt followed by a value with unit. Commonly used for vertical spacing between sections and gaps between headings and body text.
Class Patterns
Prefix mt + value + unit. Use px for values under 20px, and rem (1rem = 10px) for 20px and above.
| Class | CSS Output | Description |
|---|---|---|
mt4px | margin-top: 4px | minimum spacing |
mt8px | margin-top: 8px | narrow spacing |
mt12px | margin-top: 12px | default spacing |
mt16px | margin-top: 16px | generous spacing |
mt2rem | margin-top: 2rem (20px) | rem unit starting point |
mt2-4rem | margin-top: 2.4rem (24px) | decimals expressed with hyphens |
mt3-2rem | margin-top: 3.2rem (32px) | wide spacing |
mt4rem | margin-top: 4rem (40px) | spacing between sections |
mta | margin-top: auto | auto margin (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 | mt8px | mt0-8rem |
| 12px | mt12px | mt1-2rem |
| 16px | mt16px | mt1-6rem |
| 20px | mt20px | mt2rem |
| 24px | mt24px | mt2-4rem |
| 32px | mt32px | mt3-2rem |
| 40px | mt40px | mt4rem |
Common Values
| Class | Actual Size | Usage |
|---|---|---|
mt4px | 4px | Fine-tune inline elements |
mt8px | 8px | Narrow gap between paragraphs |
mt16px | 16px | Between heading and body |
mt2-4rem | 24px | Gap between subsections |
mt4rem | 40px | Gap between major sections |
mt4-8rem | 48px | Page major section separator |
Code Examples
<!-- Section Title Gap -->
<h2 class="mt4rem mb16px">Section Title</h2>
<p>Section body content</p>
<!-- List item gap -->
<ul>
<li>First Item</li>
<li class="mt8px">Second Item</li>
<li class="mt8px">Third Item</li>
</ul>
<!-- Responsive Gap -->
<section class="mt4-8rem sm-mt2-4rem">
Desktop 48px, mobile 24px top gap
</section>Auto Value
mta applies margin-top: auto. Used to push elements downward in flex containers.
<!-- Push footer down in flex container -->
<div class="df fdc h100vh">
<header class="p2rem">Header</header>
<main class="p2rem">Content</main>
<footer class="mta p2rem">Always at bottom</footer>
</div>Negative Margin (neg- prefix)
neg-mt applies negative margin-top. Used to pull elements upward or create overlap effects.
| Class | CSS | Description |
|---|---|---|
neg-mt8px | margin-top: -8px | pull up 8px |
neg-mt10px | margin-top: -10px | pull up 10px |
neg-mt2rem | margin-top: -2rem | pull up 20px |
<!-- Pull element up to overlap -->
<div class="bg6366F1 p4rem cFFFFFF">Top area</div>
<div class="neg-mt2rem mxa maxw40rem bg18181B p2rem br8px">
Pulled up 20px, overlaps with top area
</div>Tips & Notes
Margin Collapse
A block element's mt collapses with the previous element's mb. Only the larger value applies. Collapse does not occur inside flex/grid containers, so using gap is recommended.
Caution with neg-mt
Negative margin-top can cause elements to overlap into the area above. Without oh (overflow: hidden) on the parent, elements may overflow outside their bounds.