The CSS scroll-margin Property

Overview

The scroll-margin property is used to specify the scroll margins for an element's scroll snap area. Crucially, scroll-margin serves as a shorthand, allowing the scroll-margin-top, scroll-margin-right, scroll-margin-bottom, and scroll-margin-left properties to be defined together in a single statement.

Examples and Usage

Continuing with the shorthand context, we'll observe the behavior of scroll-margin when specified differently. Note that the examples below are primarily for demonstration purposes.

A single value sets the same scroll margin on all sides:

.scroll-element-example {
  scroll-margin: 30px; /* All sides set to 30px */
}

When two values are specified, the first value applies to the top and bottom margins and the second applies to the left and right:

.scroll-element-example {
  scroll-margin: 20px 40px; /* Top & bottom: 20px, left & right: 40px */
}

When three values are used, the first corresponds to the top, the second to left and right, and the third to the bottom scroll margin:

.scroll-element-example {
  scroll-margin: 20px 40px 60px; /* Top: 20px, left & right: 40px, bottom: 60px */
}

Four values are assigned to the top, right, bottom, and left scroll margins in that specific order:

.scroll-element-example {
  scroll-margin: 10px 20px 40px 80px; /* Top: 10px, right: 20px, bottom: 40px, left: 80px */
}

There's also a possibility of using zeroes and applying scroll margins to only the specified sides:

.scroll-element-example {
  scroll-margin: 30px 0 0 30px; /* Top: 30px, right: 0, bottom: 0, left: 30px */
}

Values

The scroll-margin property accepts the following values:

Value	Description
`<length>`	Sets an outset for the scroll snap area of the element, which can be expressed in valid length units (px, rem, em, etc.). Percentages are not accepted.

Associated Properties

scroll-margin-top
scroll-margin-right
scroll-margin-bottom
scroll-margin-left
scroll-snap-type
scroll-snap-align

Tips and Tricks

A scroll container encases scrollable content. When scroll snap properties are employed, it becomes a scroll snap container. The dimensions of this scroll container play a crucial role in the positioning of elements when using scroll-margin.
The snapport signifies the visible area of the scroll container's content. It's the section where scroll snapping takes place. The scroll-margin property influences the alignment of an element with the snapport when scrolling occurs.
Scroll snapping is a technique that controls the behavior of a scroll container. This approach allows an element to lock into place, thus ensuring its alignment with the container's snapport.
Understanding the concept of a scroll snap area is vital when working with scroll-margin. It represents the region of the element that aligns with the snapport of its scroll container during scrolling. The scroll-margin modifies the boundaries of this region.
Bounding box is another important term in this context. It refers to the smallest rectangle that can enclose the entire element, including any transformations. In the context of scroll-margin, the bounding box serves as the initial basis for the scroll snap area, before the scroll margin is applied.

Browser Compatibility

For a more detailed breakdown and specific context on older versions of Safari, refer to the first link in the Useful Resources below.

Browser	Chrome	Edge	Safari	Firefox	Opera	Internet Explorer
Support	Yes*	Yes*	Yes*	Yes*	Yes*	No

Caution: Internet Explorer support data may be incorrect since MDN browser-compat-data no longer updates it. Also, early Edge versions used EdgeHTML, leading to mismatched version numbers. From version 79, Edge uses Chromium with matching version numbers.