The scroll-padding-inline-start property defines the inset on the start side of a scroll container’s inline axis that the browser uses when calculating snap positions and scroll-to-view behavior. It does not change the visible layout of child elements or the container’s box model; instead it adjusts the scrollport’s logical “padding” used by scrolling algorithms so that when the user or script scrolls to a snap position or to an element, the element can stop offset from the container edge by the specified inset rather than abutting the edge. In practice this means you control how much space should appear between a snapped item and the start edge of the scroller without altering actual padding used for layout.

Because it is a logical property, the direction that counts as “inline start” depends on the container’s writing mode and text direction. In a left-to-right horizontal flow the start side is the left; in a right-to-left flow it’s the right; in vertical writing modes the inline axis changes and so does which physical edge is affected. This makes the property useful for components that must behave consistently across locales and writing systems: you set the logical inset once and the browser applies it correctly for the current writing direction and orientation.

Use cases typically involve scroll snapping or programmatic scrolling where fixed UI (headers, persistent overlays, navigation bars) would otherwise overlap snapped or focused content. For example, when combining snap behavior with a pinned header, you can reserve space at the start of the scroller so snapped items are revealed below the header rather than hidden underneath it. It works in concert with the scroller’s snap behavior; see scroll-snap-type for how a container enables snapping and with per-item alignment such as scroll-snap-align that determines which point of an item should be aligned to the adjusted scrollport.

Think of scroll-padding-inline-start as a scrolling-only inset: it’s specifically for scroll calculations, not for layout spacing. When you need to influence how an element is positioned when scrolled into view (as opposed to how the container positions snapped children), consider the complementary concept of margins applied to the element itself; for that behavior see scroll-margin-inline-start. Also, if you want to set multiple sides at once or provide a fallback across both inline sides, the shorthand scroll-padding can be used to express the overall scroll insets for the container.