CSS scroll-margin-inline

The scroll-margin-inline property specifies the margin of the scroll container that is used to offset scroll snap points in inline directions. This property is used to adjust where the scroll snaps when using scroll-snap-type and scroll-snap-align.

The scroll-margin-inline property can be set to a specific length, a percentage, or the value auto which is the default value. When set to a length or percentage, the margin is applied to the inline axis of the scroll container.

Examples

Result:


    <div class="container">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
    </div>

Result:

Item 1

Item 2

Item 3

Item 4

In the first example, we have a simple HTML structure with a container and four items inside. The scroll-margin-inline property is not applied, so the default behavior is used.

In the second example, we have a container with four items inside. The scroll-margin-inline property is set to 20px, causing the scroll container to offset the scroll snap points by 20 pixels in the inline direction. This creates a margin between the items when scrolling horizontally.

Experiment with different values for the scroll-margin-inline property to see how it affects the scrolling behavior of your elements.