CSS scroll-margin-right Property

Beginner
5 min read
Updated: Oct 2026
3 examples
Live preview
CSS scroll-margin-right offsetting the right edge of a snap target
Definition

Definition and Usage

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

It always means “right,” no matter the writing mode. It is not inherited. The initial value is 0. It is one longhand of scroll-margin. Pair it with scroll-snap-type and scroll-snap-align.

Physical longhand.

Standard-track and Baseline Widely available. Prefer scroll-margin-inline-end when writing mode may change. It accepts a length only — not a percentage.

Non-standard alias (legacy).

Older Safari used scroll-snap-margin-right. Prefer the standard scroll-margin-right name in new code.

Syntax

CSS Syntax

syntax.css
scroll-margin-right: <length> | initial | inherit;

Use units like px, rem, or em.

Values

Property Values

ValueDescriptionTry it
0Default. No outset on the right edgeTry it
<length>Outset such as 40px or 1remTry it
with snap endMost visible when the target snaps to its end (right in LTR) edgeTry it
vs logical endSame idea as scroll-margin-inline-end in horizontal LTRTry it
initialResets to 0Try it
inheritTakes the parent’s scroll-margin-rightTry it
Approach

How to Use scroll-margin-right

Set up horizontal snap, then offset only the target’s right 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 end for this property).
  3. Set scroll-margin-right on the target that needs right-side breathing room.
  4. Use a length such as 40px or 1rem.
PieceRequired?Role
Scroll containerYesoverflow-x + scroll-snap-type
scroll-snap-alignYesChooses which edge snaps; end shows this margin best
scroll-margin-rightYesOutset on the physical right side only
Length valueYespx, rem, em — not %
Try it

Live Preview

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

Panels use scroll-snap-align: end. Only the right margin on panel 2 changes.

Scroll →
1
2
3

scroll-margin-right: 40px

Code

CSS Examples

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

Example 1 — Fixed Length Outset

Add 40px of breathing room past the target’s right edge.

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

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

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

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

How It Works

  1. Enable horizontal snap. scroll-snap-type: x mandatory makes the scroller stop on snap points.
  2. Snap to end. scroll-snap-align: end uses each panel’s end edge (right in LTR).
  3. Offset only the right. scroll-margin-right: 40px grows panel 2’s snap area on that one side.
  4. Scroll and compare. Panel 2 rests with 40px of space past its right edge.

Example 2 — Rem Unit Outset

Use 1rem when you want the offset to scale with root font size.

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

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

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

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

How It Works

  1. Same snap setup. The scroller still snaps on the end edge.
  2. Pick a rem length. 1rem ties the outset to the root font size.
  3. Only the right changes. Left stays at the default 0.
  4. Scale-friendly. If the root font size grows, the snap gap grows with it.

Example 3 — Right Only, Not Both Sides

Prefer the longhand when you only need the right edge offset.

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

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

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

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

How It Works

  1. Ask for right room only. 2rem applies to right, not left.
  2. Shorthand alternative. scroll-margin: 0 2rem 0 0 would do the same job.
  3. Longhand is clearer. When only one edge matters, name that edge.
  4. Logical twin. In horizontal LTR this matches scroll-margin-inline-end.

Edge Cases & Pitfalls

If the right offset never shows, check snap align and whether you meant a logical property.

snap

Needs a snap container and align

Without scroll-snap-type and scroll-snap-align, this property has nothing useful to offset.

align

Most obvious with scroll-snap-align: end

If you snap to start, a right-only margin may look like it does nothing. Match the margin to the snapped edge.

%

Percentages are not valid

Use lengths only. 40% is not a valid scroll-margin-right value.

physical

Always right, even in other writing modes

Unlike scroll-margin-inline-end, this never follows writing-mode. Prefer the logical property for multilingual layouts.

vs

Not the same as scroll padding

scroll-padding-right insets the container’s snapport. This property expands the target’s snap area.

Compatibility

Browser Support

scroll-margin-right is a browser layout property for scroll snap. Node.js, Deno, and Bun do not apply it.

✓ Baseline · Widely available since 2021

scroll-margin-right

Chrome 69+, Firefox 68+, Safari 14.1+, Edge 79+, Opera 56+, Samsung Internet 10.1+. Internet Explorer does not support it.

97% Modern browsers
Google Chrome 69+
Full support
Mozilla Firefox 68+
Full support
Apple Safari 14.1+
Full support
Microsoft Edge 79+
Full support
Opera 56+
Full support
Samsung Internet 10.1+
Full support
Internet Explorer No support
Not supported
scroll-margin-right Widely supported

Bottom line: Safe for modern scroll-snap UIs. Skip Internet Explorer. Pair with scroll-snap-type and usually scroll-snap-align: end.

Remember

Key Takeaways

  • Role: set a scroll margin on the physical right edge of a snap target only.
  • Values: lengths such as 40px or 1rem. No percentages.
  • Initial value: 0. Not inherited. Part of the scroll-margin shorthand.
  • Tip: pair with scroll-snap-align: end so the right outset is easy to see.

One line: scroll-margin-right gives a snap target breathing room on its right edge — after scroll snap is already set up.

Frequently Asked Questions

It sets the scroll margin on the physical right edge of a snap target. That outset enlarges the scroll snap area so snapping can stop a little past the right edge.
The initial value is 0. There is no extra right outset until you set one.
It mainly affects scroll snapping. You still need a scroll container with scroll-snap-type and a target with scroll-snap-align for the offset to show during snap scrolling.
scroll-margin-right always targets the physical right side. scroll-margin-inline-end follows the writing mode and may map to right or another edge.
No. Set it on the element that snaps. Percentages are not valid; use lengths such as px, rem, or em.
It is Baseline and widely available: Chrome 69+, Firefox 68+, Safari 14.1+, Edge 79+, Opera 56+. Internet Explorer does not support it. It is a browser layout property, not a Node.js feature.

Next: scroll-margin-top

Learn the physical property that sets a top-edge scroll margin.

scroll-margin-top tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

5 people found this page helpful

CSS scroll-margin-left Property CSS scroll-margin-top Property