CSS scroll-margin-inline-start Property

Definition and Usage

The scroll-margin-inline-start property sets the scroll margin on the inline-start edge of a snap target. That outset enlarges the scroll snap area used when this box snaps to the snapport.

In a horizontal left-to-right writing mode, inline-start is usually the left side. It is not inherited. The initial value is 0. It is one longhand of scroll-margin-inline. Pair it with scroll-snap-type and scroll-snap-align.

CSS Syntax

Use units like px, rem, or em.

Property Values

How to Use scroll-margin-inline-start

Set up horizontal snap, then offset only the target’s inline-start edge.

1. Make a scroll container with overflow-x: auto and scroll-snap-type: x mandatory.
2. Mark snap targets with scroll-snap-align (often start for this property).
3. Set scroll-margin-inline-start on the target that needs start-side breathing room.
4. Use a length such as 40px or 1rem.

Live Preview

Scroll the strip sideways. Panel 2 is the snap target. Change scroll-margin-inline-start and snap again.

CSS Examples

Each snippet focuses on scroll-margin-inline-start. Use Try It Yourself for a live editor.

<style>
  .scroller {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .panel {
    scroll-snap-align: start;
  }

  .target {
    scroll-margin-inline-start: 40px;
  }
</style>

<div class="scroller">
  <div class="panel">1</div>
  <div class="panel target">2</div>
  <div class="panel">3</div>
</div>

<style>
  .scroller {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .panel {
    scroll-snap-align: start;
  }

  .target {
    scroll-margin-inline-start: 1rem;
  }
</style>

<div class="scroller">
  <div class="panel">1</div>
  <div class="panel target">2</div>
  <div class="panel">3</div>
</div>

<style>
  .scroller {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .panel {
    scroll-snap-align: start;
  }

  .target {
    scroll-margin-inline-start: 2rem;
  }
</style>

<div class="scroller">
  <div class="panel">1</div>
  <div class="panel target">2</div>
  <div class="panel">3</div>
</div>

Key Takeaways