scroll-margin-inline

Overview

The scroll-margin-inline property is used to specify the scroll margins for an element's scroll snap area along the inline dimension. Crucially, scroll-margin-inline serves as a shorthand, allowing the flow-relative scroll-margin-inline-start and scroll-margin-inline-end longhand properties to be specified in a single statement.

Examples and Usage

scroll-margin-inline enhances the scroll snap mechanism by modifying the margins along the inline dimension of an element's scroll snap area. As a shorthand, it offers different ways of defining scroll margins: with a single value or two distinct values. Note that the examples below are primarily for demonstration purposes.

When a single value is provided, it sets the scroll margin for both edges (start and end) along the inline dimension:

.scroll-element-example {
  scroll-margin-inline: 30px; /* Sets the scroll margin to 30px on both edges */
}

When two different values are given, they set distinct margins for the start and end edges, respectively:

.scroll-element-example {
  scroll-margin-inline: 20px 40px; /* Sets the scroll margin to 20px on the start edge and 40px on the end edge */
}

Moreover, the behavior of scroll-margin-inline can be influenced by the writing-mode and direction properties. By default, in most languages, the writing mode is horizontal, with the inline direction running from left to right. However, if the writing mode is set to vertical, the inline direction runs from top to bottom. The direction property can further modify the inline direction from left-to-right (ltr) to right-to-left (rtl).

For instance, if we set the writing-mode to vertical-rl and apply scroll-margin-inline: 30px 0;, the scroll margin would be 30px on the top edge (inline start) and 0 on the bottom edge (inline end).

.example-element {
  scroll-margin-inline: 30px 0; /* Top edge (inline start) margin: 30px, bottom edge (inline end) margin: 0 */
  writing-mode: vertical-rl;
}

Or, if we set direction: rtl; and apply scroll-margin-inline: 0 30px;, the scroll margin would be 0 on the right edge (inline start) and 30px on the left edge (inline end).

.example-element {
  scroll-margin-inline: 0 30px; /* Right edge (inline start) margin: 0, left edge (inline end) margin: 30px */
  direction: rtl;
}

In a practical scenario, where this would be applied, the scroll-margin-inline property is typically used on child elements within a scroll snap container. The container itself would be defined using the scroll-snap-type property, while the child elements would additionally have the scroll-snap-align property set.

Values

The scroll-margin-inline property accepts the following values:

Associated Properties

• scroll-margin-inline-start
• scroll-margin-inline-end
• scroll-margin-block
• scroll-margin
• scroll-padding
• scroll-padding-inline
• scroll-padding-block
• scroll-snap-type
• scroll-snap-align

Tips and Tricks

• scroll-margin-inline sets the scroll margin along the inline direction, which is influenced by the writing-mode and direction properties of the document or element.

• The scroll container encompasses the scrollable content. When scroll snap properties such as scroll-snap-type are applied, it becomes a scroll snap container.

• The snapport represents the visible part of the scroll container's content — the area where scroll snapping takes place. scroll-margin-inline affects the alignment of an element with the snapport when scrolling occurs, by adjusting the boundaries of its scroll snap area along the inline dimension.

• Understanding the concept of a scroll snap area is vital when working with scroll-margin-inline. This region of the element aligns with the snapport of its scroll container during scrolling. scroll-margin-inline modifies these boundaries, thereby affecting the element's position during scroll snapping.

• The bounding box of an element serves as the initial basis for the scroll snap area before the scroll margin is applied. This box refers to the smallest rectangle that can fully contain the entire element, including any transformations. scroll-margin-inline modifies the scroll snap area by setting a scroll margin along the inline dimension, which effectively adjusts the region that aligns with the snapport during scrolling.

Browser Compatibility

For a more detailed breakdown, refer to the first link in the Useful Resources below.

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-inline

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

The CSS scroll-margin-inline-start Property

The CSS scroll-margin-inline-end Property