CSS scroll-margin-right Property

What You’ll Learn

The scroll-margin-right property offsets a scroll target at the right edge. It is useful when you want space between the right side of the viewport or scroll container and the element being scrolled into view.

Introduction

The scroll-margin-right property in CSS is used to set the margin on the right side of an element when it is scrolled into view.

This property is particularly useful when implementing scroll snapping, allowing you to control how close an element sits to the right edge of a scrollable container and enhance the user experience.

Definition and Usage

Apply scroll-margin-right 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 shorthand. In LTR layouts it often behaves like scroll-margin-inline-end, but it always targets the physical right edge.

📝 Syntax

The syntax for the scroll-margin-right property is straightforward. You can specify a length value using units such as px, em, rem, %, and more.

element {
  scroll-margin-right: value;
}

Here, value can be any valid CSS length value.

Basic Example

.target {
  scroll-margin-right: 50px;
}

Related Properties

• scroll-margin-left — offset at the left edge
• scroll-margin — shorthand for all four sides
• scroll-margin-inline-end — logical inline-end offset

🎯 Default Value

The default value of the scroll-margin-right property is 0. This means there is no additional margin applied when the element is scrolled into view by default.

💎 Property Values

When to Use scroll-margin-right

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

• Last carousel card — Keep the final card from hugging the container’s right edge.
• Horizontal snap rows — Add space after the last snapped item when swiping sideways.
• Overflow panels — Prevent targets from stopping flush against the right edge of a scroll box.
• Anchor jumps — Improve navigation when a target should not touch the right viewport edge.

For RTL or international layouts, consider scroll-margin-inline-end instead of hard-coded right rules.

Examples Gallery

Start with the reference horizontal snap example, add right space on the last snap slide, improve a carousel closing panel, and apply right offset on one slide only.

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

  .item {
    flex: none;
    width: 200px;
    scroll-snap-align: start;
    background-color: lightblue;
  }

  .item-right-margin {
    scroll-margin-right: 50px;
  }
</style>

<div class="scroll-container">
  <div class="item">Item 1</div>
  <div class="item item-right-margin">Item 2 with right margin</div>
  <div class="item">Item 3</div>
</div>

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

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

#slide-right {
  scroll-margin-right: 3rem;
}

scroll-margin-right in the family

scroll-margin-right is the right longhand of scroll-margin. For the opposite side, see scroll-margin-left.

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

💡 Best Practices