scroll-margin-bottom
Sets the space to keep below an element when it is scrolled into view. It is mainly used so a fixed footer or a mobile action bar does not cover the scroll target, and it has no effect on the element's actual layout.
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 |
Live Demo
Each button jumps the container to the bottom, then scrolls the blue block into view aligned to the end. Compare how far the block stops from the bottom edge for each class.
With smb0 the block sits flush against the inner bottom edge; with smb4rem it stops 40px above it. The block's own size and position never change.
Class Details
smb0scroll-margin-bottom: 0
Resets the scroll margin to zero. Use it when a shared layout already compensates for a footer but one block should reach all the way to the bottom.
<!-- Reset an inherited offset for one row -->
<div class="sstym oya h40rem">
<div class="ssae smb2rem h20rem">Row 1</div>
<div class="ssae smb0 h20rem">Flush against the bottom edge</div>
</div>smb8pxscroll-margin-bottom: 8px
8px. The smallest offset that keeps borders and focus rings from being clipped at the bottom edge. Suits dense list items.
<!-- Message list: keep the focus ring off the bottom edge -->
<div class="oya h40rem df fdc gap8px">
<article class="smb8px p16px br8px">Message 1</article>
<article class="smb8px p16px br8px">Message 2</article>
</div>smb16pxscroll-margin-bottom: 16px
16px. Matches a vertical feed with 16px gaps so end-aligned items keep the same rhythm as the list.
<!-- Vertical snap feed with a 16px rhythm -->
<div class="sstym oya h40rem df fdc gap16px">
<section class="ssae smb16px h30rem">Post 1</section>
<section class="ssae smb16px h30rem">Post 2</section>
</div>smb2remscroll-margin-bottom: 2rem
20px. Reserves room so validation messages or helper text under an input scroll into view along with the field itself.
<!-- Reserve room for the helper text under a validated field -->
<form class="oya h40rem">
<div class="smb2rem">
<label for="email">Email</label>
<input id="email" class="w100p p12px">
<p class="fs12px cEF4444">Enter a valid address</p>
</div>
</form>smb4remscroll-margin-bottom: 4rem
40px. The go-to value for clearing a 40px fixed footer, mobile action bar, or cookie banner that would otherwise cover the target.
<!-- Clear a 40px fixed footer / mobile action bar -->
<article id="terms" class="smb4rem p2rem">
<h2>Terms</h2>
<p>Long text...</p>
</article>
<footer class="pf b0 l0 w100p h4rem df jcc aic bg18181B">
<button class="py12px px2rem br8px bn bg6366F1 cFFFFFF">Agree</button>
</footer>Usage Examples
<!-- Correct scroll target when a fixed footer exists -->
<section id="bottom-section" class="smb4rem">
<p>The bottom offset keeps it above the 40px fixed footer</p>
</section>
<!-- Bottom margin in vertical scroll snap -->
<div class="ssae smb2rem bg18181B p2rem br8px">
Reserve extra space below the snap point
</div>Practical example: chat window with a composer
When you scroll to the newest bubble after sending, the message hides behind the pinned composer unless you reserve space equal to its height.
<!-- Chat window: after sending, scroll the new message into view so it
lands above the composer instead of behind it -->
<div class="df fdc h100vh">
<div id="log" class="obc oya swt fg1 p16px df fdc gap12px">
<article class="p12px br8px bg18181B">Hi there</article>
<article id="last" class="smb4rem p12px br8px bg6366F1 cFFFFFF">
Just sent this one
</article>
</div>
<!-- 40px tall composer pinned to the bottom -->
<form class="h4rem df aic gap8px px16px bt1pxsolid27272A">
<input class="fg1 p12px br8px bg0F0F17 bn cFAFAFA">
<button class="py8px px16px br8px bn bg6366F1 cFFFFFF cp">Send</button>
</form>
</div>
<script>
document.getElementById('last')
.scrollIntoView({ behavior: 'smooth', block: 'end' });
</script>Pitfalls
It only applies when something scrolls the element into view
scroll-margin is consulted for anchor navigation, scrollIntoView, and scroll snapping. Manual scrolling and ordinary layout are completely unaffected.
Only visible with bottom alignment
A bottom offset applies when the element is aligned to the bottom. If you scroll targets to the top instead, you want scroll-margin-top. With both a sticky header and a fixed footer, set both.
Match the value to the real footer height
Too small and the target is still covered, too large and it floats into the middle of the viewport. If the footer height changes often, manage it in one place with scroll-padding-bottom on the container.