CSS scroll-margin-inline Property

What You’ll Learn

The scroll-margin-inline property sets scroll offsets on the inline axis. It is the logical companion to left/right scroll margins and works especially well with horizontal scroll snapping and carousels.

Introduction

The scroll-margin-inline property in CSS is used to define the margin on the inline start and inline end edges of an element when it is scrolled into view.

This property is particularly useful when working with horizontal scroll snapping, allowing you to adjust the scroll offset for elements along the inline axis, which varies based on the writing mode and direction of the document.

Definition and Usage

scroll-margin-inline is a logical shorthand for scroll-margin-inline-start and scroll-margin-inline-end. Apply it to the scroll target element inside a horizontally scrollable container.

In standard LTR horizontal writing mode, inline-start maps to the left and inline-end maps to the right. The property also works with anchor links and scrollIntoView() inside overflow containers.

📝 Syntax

The syntax for the scroll-margin-inline property is straightforward. You can specify a single value or two values for the inline start and inline end margins.

element {
  scroll-margin-inline: value;
}

element {
  scroll-margin-inline: inline-start-value inline-end-value;
}

Basic Example

.item {
  scroll-margin-inline: 20px;
}

Longhand Properties

• scroll-margin-inline-start — offset at the inline-start edge
• scroll-margin-inline-end — offset at the inline-end edge

Syntax Rules

• One value sets both inline-start and inline-end equally.
• Two values set inline-start first, then inline-end.
• Lengths and percentages are valid.
• Works with scroll-snap-type: x mandatory and similar horizontal snap rules.

🎯 Default Value

The default value of the scroll-margin-inline property is 0, which means there is no additional margin applied when the element is scrolled into view.

💎 Property Values

When to Use scroll-margin-inline

scroll-margin-inline is the right choice when inline-axis scroll offsets should follow logical layout:

• Horizontal carousels — Keep snapped cards away from container side edges.
• Scroll snapping on the x-axis — Fine-tune where items land when swiping sideways.
• RTL layouts — Prefer logical inline margins over hard-coded left/right rules.
• Overflow panels — Improve targets inside horizontally scrollable toolbars or tabs.

For vertical offsets, use scroll-margin-block instead.

Examples Gallery

Start with the reference horizontal snap row, set different inline-start and inline-end values, try a carousel panel, and use the scroll-margin-inline-start longhand on the first slide.

<style>
  .container {
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
  }

  .item {
    scroll-snap-align: center;
    scroll-margin-inline: 20px;
  }
</style>

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
</div>

.card {
  scroll-margin-inline: 32px 12px;
}

.slide {
  scroll-snap-align: center;
  scroll-margin-inline: 16px;
}

#slide-1 {
  scroll-margin-inline-start: 24px;
}

scroll-margin-inline vs physical sides

scroll-margin is the physical shorthand for all four sides. scroll-margin-inline targets only the inline axis and is safer for multilingual and RTL layouts.

Pair horizontal snapping with scroll-margin-block when a layout also needs vertical scroll offsets.

/* Physical sides */
.physical { scroll-margin-left: 20px; scroll-margin-right: 20px; }

/* Logical inline shorthand */
.logical { scroll-margin-inline: 20px; }

💡 Best Practices