CSS scroll-margin-right Property

The scroll-margin-right property controls an extra offset on the right edge of an element’s snap area that the browser uses when bringing that element into view via scrolling (for example, during scroll snapping or when programmatically scrolling an element into view). In other words, it shifts the effective “landing zone” on the right side so the element doesn’t end up flush against the scroll container’s right edge. This adjustment is applied only to the snapping/scrolling behavior; it does not change the element’s layout, box model, or how it participates in document flow.

In practice this property is useful when you want items to stop slightly away from the right edge of a scroll container — for instance, in a horizontally scrolling carousel, a list of cards, or when compensating for a fixed overlay at the right side of the viewport. It’s commonly combined with smooth scrolling and programmatic calls like element.scrollIntoView to produce a visually pleasing final position where the focused element has breathing room instead of being jammed against the container boundary. Because it only affects the snap/scroll target, it won’t affect hit testing or the spatial relationships used by other layout rules.

Conceptually scroll-margin-right is one side-specific member of the scroll-margin family; you can control all sides together with the shorthand scroll-margin, or prefer the writing-mode–aware logical counterpart scroll-margin-inline-end for internationalized layouts. It interacts with the container-side configuration — for example, scroll-padding-right adjusts the container’s snapport and therefore complements element-side margins — and with alignment rules such as scroll-snap-align, which determines which point of the element is aligned when snapping occurs. A common pitfall is expecting this property to change the element’s normal visual spacing; instead, treat it as an offset that only affects where the element ends up after scrolling or snapping.