CSS scroll-margin-inline Property

The scroll-margin-inline property controls the amount of logical inline-axis space that the user agent preserves when an element is brought into view by scrolling (for example via fragment navigation, programmatic scrolling, or scroll snapping). Rather than changing an element’s layout margin in the normal flow, this margin is applied only for the purposes of determining the element’s final position relative to the scrolling container’s inline edge when it is scrolled into view. Because it’s a logical inline property, the direction that counts as “inline” depends on the element’s writing mode and text direction (so left/right in horizontal text and top/bottom in vertical text).

In practical terms, scroll-margin-inline is useful whenever you need a consistent offset from the inline edge of a scroll container without altering the element’s visual layout. For example, in a horizontally scrolling carousel you can ensure the snapped item doesn’t sit flush against the container edge but leaves a comfortable breathing space; on RTL pages it will automatically apply the offset at the start/end appropriate to that direction. It’s also handy for anchor-targeted navigation in compositions where horizontal spacing matters, or when you want a different inline offset when elements are brought into view than their normal static margins would provide.

This property interacts closely with scroll snapping and the scroll-port padding model. When a container uses scroll snapping, the element’s scroll margin influences where that element will land when snapped; it effectively shifts the snap position away from the edge by the specified inline margin. For related behavior that affects the container’s viewport rather than the individual element, consider scroll-padding-inline. For controlling how snapping is applied on the container itself, see scroll-snap-type, and if you want to set inline and block scroll margins in one declaration, look at the related shorthand scroll-margin.

Note that because scroll-margin-inline only participates in scroll positioning logic, it will not influence normal layout computations such as element stacking, collisions, or intrinsic sizing. It’s a targeted tool for fine-tuning the user experience of scroll and snap interactions, letting you adjust the apparent arrival point of an element without changing how that element affects other boxes on the page.