scroll-margin-top
Adds margin above an element when scrolling via anchor links. Useful for preventing scroll targets from being hidden behind a fixed header.
Class List
Pattern: smt{value}{unit}
| Class | CSS | Description |
|---|---|---|
smt0 | scroll-margin-top: 0 | No scroll margin |
smt8px | scroll-margin-top: 8px | 8px margin |
smt16px | scroll-margin-top: 16px | 16px margin |
smt2rem | scroll-margin-top: 2rem | 20px margin |
smt4rem | scroll-margin-top: 4rem | 40px margin |
smt6rem | scroll-margin-top: 6rem | 60px margin (typical header height) |
smt8rem | scroll-margin-top: 8rem | 80px margin |
smt10rem | scroll-margin-top: 10rem | 100px margin |
Usage Examples
<!-- Add scroll margin to anchor link targets -->
<section id="section1" class="smt6rem">
<h2>Section Title</h2>
<p>Not obscured below the fixed header (60px).</p>
</section>
<!-- Scroll snap + margin -->
<div class="smt4rem" id="card-1">
<div class="bg18181B p2rem br8px">Card 1</div>
</div>Tips & Notes
scroll-margin vs scroll-padding
smt is applied to the scroll target element, while spt is applied to the scroll container. scroll-padding-top is more suitable for fixed header compensation.