CSS scroll-margin-inline-start Property

The scroll-margin-inline-start property defines a logical offset on the start side of the inline axis that the browser uses when bringing an element into view. It does not change the element’s layout box or affect how surrounding content flows; instead it tells the user agent to stop scrolling a bit earlier (or later) than the element’s border when that element becomes the target of programmatic or snap-based scrolling. Because it is a logical property, its effect follows the document’s writing mode and direction: “inline start” may be left, right, or another side depending on the writing-mode and the direction of the text.

This property is intended for visual adjustment of scroll positioning without altering document geometry — for example, creating breathing room between a scrolled-to item and an overlaid header, or ensuring a snapped item isn’t flush against the container edge. It interacts directly with the browser’s scroll-to and scroll-snapping behaviors: when an element is scrolled into view or matched as a snap point, the engine respects the scroll-margin-inline-start offset when calculating the final scroll position. For clarifying how this differs from moving the element itself, see margin-inline-start.

In multi-axis or complex layouts this property composes with other scroll-related logical properties. The element-level scroll margin family can be managed together with the shorthand scroll-margin, while container-side adjustments that affect the visible snap area are handled by scroll-padding. It also complements snap alignment settings such as scroll-snap-align, where the margin shifts the apparent alignment target without changing the snap alignment rule itself. In practice, use scroll-margin-inline-start when you need a consistent visual offset for scrolled or snapped elements (especially across different writing modes) while keeping layout metrics intact.