CSS scroll-margin-left

The scroll-margin-left property adds extra space on the left side of an element when the browser scrolls it into view or aligns it in a scroll snap container.

Syntax

scroll-margin-left: 0;
scroll-margin-left: 1rem;
scroll-margin-left: 4rem;

Example

.section-title {
  scroll-margin-left: 2rem;
}

In a horizontal layout, this prevents the target from being pressed directly against the left edge after scrolling.

When it helps

Use this property for anchor targets, snap items and scripted scrolling. It is especially useful when a horizontal scroller has decorative padding or when a target should not sit flush against the viewport edge.

For writing-mode-aware layouts, prefer scroll-margin-inline-start.

Common mistake

scroll-margin-left does not add normal layout margin. It affects scroll positioning, not the everyday box model.

Related CSS topics

In the example above, we have a div element with content that overflows vertically, creating a scroll bar. We have specified a scroll-margin-left of 20px, which creates a padding space of 20 pixels between the content and the scroll bar on the left side.

By adjusting the value of scroll-margin-left, you can control the spacing between the content and the scroll bar to achieve the desired layout.