CSS scroll-margin-inline-end Property

What You’ll Learn

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

Introduction

The scroll-margin-inline-end property in CSS is used to set the scroll offset at the inline-end edge of an element when it is scrolled into view. Along the inline axis, this is typically the right 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-end edge of the viewport or scroll container when it is brought into view.

Definition and Usage

Apply scroll-margin-inline-end 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-end side needs adjustment.

📝 Syntax

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

element {
  scroll-margin-inline-end: length;
}

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-end: 20px;
}

Related Properties

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

🎯 Default Value

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

💎 Property Values

When to Use scroll-margin-inline-end

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

• Last carousel slide — Keep the final card from hugging the container’s trailing edge.
• Horizontal snap rows — Add space after the last snapped item when swiping sideways.
• Wide scroll targets — Prevent wide panels from stopping flush against the inline-end edge.
• Logical layouts — Prefer inline-end over hard-coded right in international sites.

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

Examples Gallery

Start with the reference horizontal container example, add inline-end space on the last snap slide, improve a carousel end panel, and use the longhand on one slide only.

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

  .item {
    width: 500px;
    scroll-margin-inline-end: 20px;
    background-color: lightblue;
  }
</style>

<div class="container">
  <div class="item">Scroll me!</div>
</div>

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

.panel:last-child {
  scroll-margin-inline-end: 2rem;
}

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

scroll-margin-inline-end in the family

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

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

💡 Best Practices