CSS scroll-margin-inline-start Property

What You’ll Learn

The scroll-margin-inline-start property offsets a scroll target at the inline-start edge. It is useful when the leading side of an element should not sit flush against the viewport or scroll container when scrolled into view.

Introduction

The scroll-margin-inline-start property in CSS is used to set the scroll offset at the inline-start edge of an element when it is scrolled into view. Along the inline axis, this is typically the left side in horizontal left-to-right writing modes.

This property is particularly useful when you want to adjust the scroll position so content is not too close to the inline-start edge of the viewport or scroll container when it is brought into view.

Definition and Usage

Apply scroll-margin-inline-start to the element being scrolled to — not to the scroll container itself. It works with anchor links, scrollIntoView(), focus navigation, and scroll snapping.

It is one longhand of the scroll-margin-inline shorthand. Use it when only the inline-start side needs adjustment.

📝 Syntax

The syntax for the scroll-margin-inline-start property is straightforward. You can specify the margin value using any valid CSS length unit.

element {
  scroll-margin-inline-start: length | percentage;
}

Here, length can be a value in pixels (px), em units (em), rem units (rem), percentages (%), or any other valid CSS length unit.

Basic Example

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

Related Properties

• scroll-margin-inline-end — offset at the inline-end edge
• scroll-margin-inline — shorthand for start and end
• scroll-margin-left — physical left offset

🎯 Default Value

The default value of the scroll-margin-inline-start property is 0. This means that, by default, there is no additional margin applied at the inline-start edge when the element is scrolled into view.

💎 Property Values

When to Use scroll-margin-inline-start

scroll-margin-inline-start helps when the inline-start side of a target needs breathing room:

• First carousel slide — Keep the opening card from hugging the container’s leading edge.
• Horizontal snap rows — Add space before the first snapped item when swiping sideways.
• Scroll targets in panels — Prevent targets from stopping flush against the inline-start edge.
• Logical layouts — Prefer inline-start over hard-coded left in international sites.

For the inline-end side (usually right in LTR), use scroll-margin-inline-end instead.

Examples Gallery

Start with the reference scroll target example, add inline-start space on the first snap slide, improve a carousel opening panel, and use the longhand on one slide only.

<style>
  .container {
    width: 200px;
    height: 200px;
    overflow: auto;
    border: 1px solid #334155;
  }

  .content {
    width: 500px;
    height: 500px;
  }

  .target {
    scroll-margin-inline-start: 20px;
    background-color: lightblue;
    width: 100px;
    height: 100px;
    margin: 200px 0;
  }
</style>

<div class="container">
  <div class="content">
    <div class="target">Scroll to me</div>
  </div>
</div>

.slide:first-child {
  scroll-snap-align: start;
  scroll-margin-inline-start: 24px;
}

.panel:first-child {
  scroll-margin-inline-start: 2rem;
}

#slide-start {
  scroll-margin-inline-start: 3rem;
}

scroll-margin-inline-start in the family

scroll-margin-inline-start is the inline-start longhand of scroll-margin-inline. For the opposite side, see scroll-margin-inline-end.

/* These are equivalent when only inline-start matters */
.a { scroll-margin-inline-start: 2rem; }
.b { scroll-margin-inline: 2rem 0; }

💡 Best Practices