CSS scroll-margin-left Property

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

Definition and Usage

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

It always means “left,” 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-start when writing mode may change. It accepts a length only — not a percentage.

Non-standard alias (legacy).

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

Syntax

CSS Syntax

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

Use units like px, rem, or em.

Values

Property Values

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

How to Use scroll-margin-left

Set up horizontal snap, then offset only the target’s left 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 start for this property).
  3. Set scroll-margin-left on the target that needs left-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; start shows this margin best
scroll-margin-leftYesOutset on the physical left side only
Length valueYespx, rem, em — not %
Try it

Live Preview

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

Panels use scroll-snap-align: start. Only the left margin on panel 2 changes.

Scroll →
1
2
3

scroll-margin-left: 40px

Code

CSS Examples

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

Example 1 — Fixed Length Outset

Add 40px of breathing room before the target’s left edge.

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

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

  .target {
    scroll-margin-left: 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 start. scroll-snap-align: start uses each panel’s start edge (left in LTR).
  3. Offset only the left. scroll-margin-left: 40px grows panel 2’s snap area on that one side.
  4. Scroll and compare. Panel 2 rests with 40px of space before its left 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: start;
  }

  .target {
    scroll-margin-left: 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 start edge.
  2. Pick a rem length. 1rem ties the outset to the root font size.
  3. Only the left changes. Right stays at the default 0.
  4. Scale-friendly. If the root font size grows, the snap gap grows with it.

Example 3 — Left Only, Not Both Sides

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

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

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

  .target {
    scroll-margin-left: 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 left room only. 2rem applies to left, not right.
  2. Shorthand alternative. scroll-margin: 0 0 0 2rem 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-start.

Edge Cases & Pitfalls

If the left 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: start

If you snap to end, a left-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-left value.

physical

Always left, even in other writing modes

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

vs

Not the same as scroll padding

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

Compatibility

Browser Support

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

✓ Baseline · Widely available since 2021

scroll-margin-left

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-left Widely supported

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

Remember

Key Takeaways

  • Role: set a scroll margin on the physical left 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: start so the left outset is easy to see.

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

Frequently Asked Questions

It sets the scroll margin on the physical left edge of a snap target. That outset enlarges the scroll snap area so snapping can stop a little before the left edge.
The initial value is 0. There is no extra left 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-left always targets the physical left side. scroll-margin-inline-start follows the writing mode and may map to left 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-right

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

scroll-margin-right 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-inline-start Property CSS scroll-margin-right Property