1. css
  2. /properties
  3. /scroll-margin

scroll-margin

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:

ValueDescription
<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.

BrowserChromeEdgeSafariFirefoxOperaInternet Explorer
SupportYes*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.

Useful Resources

Can I use: scroll-margin

W3C's Editor's Draft of CSS Scroll Snap Module Level 1: scroll-margin

The CSS scroll-margin-top Property

The CSS scroll-margin-right Property

The CSS scroll-margin-bottom Property

The CSS scroll-margin-left Property