CSS scroll-margin-inline Property

Beginner
5 min read
Updated: Oct 2026
3 examples
Live preview
CSS scroll-margin-inline offsetting a horizontal scroll snap target
Definition

Definition and Usage

The scroll-margin-inline property is a shorthand for scroll-margin-inline-start and scroll-margin-inline-end. It adds outsets to a snap target’s scroll snap area on the inline axis.

In a horizontal writing mode that usually means left and right. It is not inherited. Both longhands start at 0. Pair it with scroll-snap-type on the container and scroll-snap-align on the target.

Logical shorthand.

Standard-track and Baseline Widely available. Prefer it over physical left/right margins when the layout may switch writing mode. It accepts lengths only — not percentages.

Syntax

CSS Syntax

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

One value sets both sides. Two values set start then end.

Values

Property Values

ValueDescriptionTry it
0Default. No extra outset on either inline edgeTry it
one <length>Same outset on inline-start and inline-end, e.g. 40pxTry it
two <length>sStart then end, e.g. 0 2remTry it
with snap endOutset is most visible when snapping to the inline endTry it
initialResets both sides to 0Try it
inheritTakes the parent’s scroll-margin-inlineTry it
Approach

How to Use scroll-margin-inline

Set up horizontal snap, then offset the target’s snap area on the inline axis.

  1. Make a scroll container with overflow-x: auto (or scroll) and scroll-snap-type: x mandatory.
  2. Mark snap targets with scroll-snap-align.
  3. Set scroll-margin-inline on the target that needs breathing room.
  4. Use one length for both sides, or two lengths for start and end.
PieceRequired?Role
Scroll containerYesoverflow-x + scroll-snap-type
scroll-snap-alignYesChooses which edge of the target snaps
scroll-margin-inlineYesOutsets the snap area on the inline axis
Length valuesYespx, rem, em — not %
Try it

Live Preview

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

Panels use scroll-snap-align: end. The margin on panel 2 leaves space before that end edge.

Scroll →
1
2
3

scroll-margin-inline: 40px

Code

CSS Examples

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

Example 1 — One Length Both Sides

Give the snap target the same inline outset on start and end.

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

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

  .target {
    scroll-margin-inline: 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. Align to start. scroll-snap-align: start snaps each panel’s inline-start edge.
  3. Offset panel 2. scroll-margin-inline: 40px grows that panel’s snap area by 40px on both sides.
  4. Scroll and compare. Panel 2 rests with 40px of breathing room instead of flush against the edge.

Example 2 — Start and End Values

Set different outsets for inline-start and inline-end.

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

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

  .target {
    scroll-margin-inline: 0 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. Same snap setup. The scroller and panels still snap on the inline start.
  2. Two values. 0 2rem means start = 0, end = 2rem.
  3. End gets the room. Only the inline-end side of the snap area grows.
  4. Shorthand maps cleanly. That is the same as setting the two longhands separately.

Example 3 — Snap to Inline End

When you snap to the end edge, the end margin is the one you notice most.

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

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

  .target {
    scroll-margin-inline: 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. Snap to end. scroll-snap-align: end uses the inline-end edge as the snap point.
  2. Add a 1rem outset. Both sides get 1rem, but the end edge is the one that lines up in the snapport.
  3. Stop short of flush. The scroller settles with about 1rem of space past that end edge.
  4. You could set only the end. scroll-margin-inline-end: 1rem would be enough for this pattern.

Edge Cases & Pitfalls

If the offset never shows, scroll snap is usually incomplete.

snap

Needs a snap container and align

Without scroll-snap-type and scroll-snap-align, scroll-margin-inline has nothing useful to offset.

%

Percentages are not valid

The formal syntax is lengths only. Use px, rem, or em — not %.

vs

Not the same as scroll-padding-inline

scroll-padding-inline insets the scroll container’s snapport. scroll-margin-inline expands the target’s snap area.

axis

Inline follows writing mode

In vertical writing modes the inline axis is vertical, so this property offsets top/bottom instead of left/right.

edge

Only the snapped edge feels obvious

If you snap to end, the end margin is what you notice. Setting only that longhand is often enough.

Compatibility

Browser Support

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

✓ Baseline · Widely available since 2021

scroll-margin-inline

Chrome 69+, Firefox 68+, Safari 15+, 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 15+
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-inline Widely supported

Bottom line: Safe for modern scroll-snap UIs. Skip Internet Explorer. Pair with scroll-snap-type and scroll-snap-align or the offset will not show.

Remember

Key Takeaways

  • Role: shorthand for inline-start and inline-end scroll margins on a snap target.
  • Values: one length for both sides, or two lengths for start then end.
  • Initial value: 0 on both longhands. Not inherited. No percentages.
  • Tip: use scroll-padding-inline on the container when you want to inset the snapport instead.

One line: scroll-margin-inline gives a snap target breathing room on the inline axis — after scroll snap is already set up.

Frequently Asked Questions

It is a shorthand that sets scroll margins on the inline axis — scroll-margin-inline-start and scroll-margin-inline-end. Those outsets enlarge the scroll snap area so snapping stops a little before or after the element's edge.
Both longhands default to 0. There is no extra inset until you set one.
It mainly affects scroll snapping. You still need a scroll container with scroll-snap-type and snap targets with scroll-snap-align for the offset to show during snap scrolling.
scroll-margin-inline is set on the snap target (the child). scroll-padding-inline is set on the scroll container and insets the snapport itself.
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 15+, Edge 79+, Opera 56+. Internet Explorer does not support it. It is a browser layout property, not a Node.js feature.

Next: scroll-margin-inline-end

Learn the longhand that sets only the inline-end scroll margin.

scroll-margin-inline-end 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-bottom Property CSS scroll-margin-inline-end Property