scroll-margin-bottom
Adds margin below an element when scrolling via anchor links. Used to prevent scroll targets from being obscured by a fixed footer.
Class List
Pattern: smb{value}{unit}
| Class | CSS | Description |
|---|---|---|
smb0 | scroll-margin-bottom: 0 | No scroll margin |
smb8px | scroll-margin-bottom: 8px | 8px margin |
smb16px | scroll-margin-bottom: 16px | 16px margin |
smb2rem | scroll-margin-bottom: 2rem | 20px margin |
smb4rem | scroll-margin-bottom: 4rem | 40px margin |
Usage Examples
<!-- Correct scroll target when fixed footer exists -->
<section id="bottom-section" class="smb6rem">
<p>Add bottom margin so it is not obscured by the fixed footer (60px)</p>
</section>
<!-- Bottom margin in vertical scroll snap -->
<div class="smb2rem bg18181B p2rem br8px">
Reserve extra space below snap point
</div>