CSS scroll-padding-left Property

The scroll-padding-left property controls the left inset of a scroll container’s snap area (sometimes called the “snapport”), shifting where content is considered to be aligned when it is scrolled into view or when the browser performs snap scrolling. It does not change the element’s layout, box size, or the element’s own content position - it only modifies the virtual padding that the browser uses when calculating scroll targets and snap destinations. In other words, it creates an invisible offset on the left edge of the scrollport that affects which portion of a child becomes the reference point during programmatic or user-initiated scrolling.

When you use scroll snapping, the visible placement of a snapped child is the result of both the child’s snap alignment and the container’s snapport. If children are given alignment anchors via scroll-snap-align, adjusting the container’s left snap inset with scroll-padding-left moves the spot those children land at without touching their own boxes. Likewise, scroll-padding is the shorthand that groups the four sides; scroll-padding-left is the physical side-specific component of that shorthand and will override the left value when the shorthand is used.

Practically, scroll-padding-left is useful when you have fixed or sticky elements along the left side (for example a persistent navigation rail) or when you want scrolled-to content to avoid being flush with a container edge. Because it only affects the snap/scroll calculations, it’s a lightweight way to ensure visible targets are offset from the left edge without restructuring your layout or adding extra inner wrappers. It’s also helpful for predictable scrollIntoView behavior across different user agents and for arranging where focus lands after keyboard navigation or programmatic focus/scroll operations.

Keep in mind that “left” is a physical direction: in right-to-left or vertical writing contexts you may prefer the logical alternative to get consistent behavior across writing modes. For those cases use the logical property scroll-padding-inline-start so the inset follows the inline-start edge rather than the physical left edge. Finally, remember this property applies to the scroll container itself - it affects how the container interprets snap and scroll targets, not the internal spacing of the child elements themselves.