The scroll-margin-bottom property defines an extra offset applied to an element when the user (or script) scrolls that element into view. Rather than changing the element’s layout or the flow of the document, it influences where the element is positioned relative to the bottom edge of the scroll container after the scrolling finishes. This makes it useful for ensuring the target of an anchor link, a programmatic scroll, or a keyboard focus becomes visible with some breathing room rather than sitting flush against the container edge.

Because the offset is applied at scroll time, the property is set on the element being targeted rather than on the scrolling container. It therefore behaves quite differently from layout-level spacing such as margin-bottom; adding a scroll margin does not affect surrounding content, element collapse, or reflow—only the final scrolled position. This distinction is why developers often use scroll margin to tweak in-view placement for interactive focus targets, “skip to content” links, and fragment navigation without altering the page’s visual layout.

This property interacts with other scroll-related controls. For example, when you combine it with CSS scroll snapping, the snap calculations take an element’s scroll margins into account alongside its snap alignment so that snapped positions land where you intend; see scroll-snap-align for how element alignment participates in snapping. For container-side adjustments—creating a persistent inset or “safe area” inside a scroll container—use the container-focused control scroll-padding; the final scrolled position is determined considering both the container’s padding and the element’s scroll margin.

In practical terms, scroll-margin-bottom is a simple but powerful tool for improving usability: it prevents important content from being obscured by fixed headers, gives visual context when jumping to anchors, and helps make keyboard or programmatic navigation feel less abrupt. It applies uniformly to user-initiated and script-initiated scrolling, and because it does not alter layout, it is safe to add to targets where you only want to influence scrolling behavior without impacting surrounding element placement.