CSS scroll-padding-left Property

Beginner
5 min read
Updated: Oct 2026
3 examples
Live preview
CSS scroll-padding-left insetting the scrollport at the physical left edge
Definition

Definition and Usage

The scroll-padding-left property insets the scrollport at the physical left edge. Snap and scroll targets stop inside that inset instead of flush against the left.

It is a longhand of scroll-padding. For a logical alternative that follows writing mode and direction, use scroll-padding-inline-start. It is not inherited.

Baseline Widely available.

Not deprecated. Physical longhand for the left scrollport inset. Widely available since April 2021 (Safari 14.1+). Works on any scroll container, with or without snap. Safari 11–14 had partial support.

Syntax

CSS Syntax

syntax.css
scroll-padding-left: auto | <length-percentage> | initial | inherit;

Percentages are relative to the scrollport width.

Values

Property Values

ValueDescriptionTry it
autoDefault. Browser chooses (usually 0px)Try it
<length>Fixed inset such as 48px or 3remTry it
<percentage>Percent of the scrollport widthTry it
initialResets to autoTry it
inheritTakes the parent’s scroll-padding-leftTry it
Approach

How to Use scroll-padding-left

Set it on the scroll container when content should clear the left edge.

  1. Create a horizontal scroll container (overflow-x: auto).
  2. Optionally snap with scroll-snap-type: x and scroll-snap-align: start.
  3. Set scroll-padding-left to match a left sidebar or breathing room.
  4. Scroll — start-aligned targets stop after the inset.
PieceRequired?Role
Scroll containerYesWhere the property is declared
scroll-padding-leftYesInsets the physical left of the scrollport
scroll-snap-align: startHelpfulMakes the left inset easy to see in LTR
Sidebar / chrome widthCommonMatch the inset to fixed left UI
Try it

Live Preview

Scroll sideways. Panels snap to the start. Change the left inset and watch the gap on the left.

The amber band marks the physical left inset.

Scroll box
1
2
3

scroll-padding-left: 48px — start snap stops after the left band

Code

CSS Examples

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

Example 1 — Length Inset at the Left

Reserve space at the left so snapped panels clear a sidebar band.

CSS
<style>
  .scroller {
    width: 260px;
    overflow-x: auto;
    display: flex;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 48px;
  }

  .panel {
    flex: 0 0 240px;
    scroll-snap-align: start;
  }
</style>

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

How It Works

  1. Create a horizontal scroller. Overflow defines the scrollport.
  2. Snap horizontally. x mandatory locks panels on the x-axis.
  3. Align to the start. In LTR, scroll-snap-align: start aims at the left edge.
  4. Inset that edge. 48px keeps snapped panels after the left band.

Example 2 — Percentage of the Scrollport

Size the left inset relative to the scroller width.

CSS
<style>
  .scroller {
    width: 260px;
    overflow-x: auto;
    display: flex;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 20%;
  }

  .panel {
    flex: 0 0 240px;
    scroll-snap-align: start;
  }
</style>

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

How It Works

  1. Use a percentage. 20% is relative to the scrollport width.
  2. Scales with the box. Wider scrollers get a larger left inset.
  3. Always physical. Unlike scroll-padding-inline-start, this stays on the left in every writing mode.
  4. Prefer lengths for fixed sidebars. Match pixel chrome with px or rem.

Example 3 — Auto (Default)

With auto, the browser usually applies no extra left inset.

CSS
<style>
  .scroller {
    width: 260px;
    overflow-x: auto;
    display: flex;
    scroll-snap-type: x mandatory;
    scroll-padding-left: auto;
  }

  .panel {
    flex: 0 0 240px;
    scroll-snap-align: start;
  }
</style>

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

How It Works

  1. Initial value. Omitting the property is the same as auto.
  2. Usually zero. Start-aligned panels snap flush to the left edge.
  3. UA freedom. A browser may pick a non-zero offset when it helps readability.
  4. Override when needed. Set a length or percentage for predictable left clearance.

Edge Cases & Pitfalls

Left insets are easy to miss if panels snap to the right edge.

align

Use start snap to see the effect

With scroll-snap-align: end, a left inset may look unused in LTR. Prefer start when testing the left band.

physical

Always the left, never logical

In RTL or vertical writing-mode, the inline-start edge moves. Prefer scroll-padding-inline-start when flow can change.

target

Set it on the scroller

Targets use scroll-margin-left. The container uses scroll-padding-left.

layout

It is not padding-left

Layout does not shift. Only scroll and snap aiming change inside the scrollport.

Compatibility

Browser Support

scroll-padding-left is a browser CSS property. Node.js, Deno, and Bun do not apply it.

✓ Baseline · Widely available since Apr 2021

scroll-padding-left

Chrome 69+, Edge 79+, Firefox 68+, Safari 14.1+, Opera 56+, Samsung Internet 10.1+. Safari 11–14 had partial support. Internet Explorer has no support.

97% Global reach
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-padding-left Widely supported

Bottom line: Safe for modern sites. Prefer scroll-padding-inline-start when writing-mode or direction may change. Not a server runtime API.

Remember

Key Takeaways

  • Role: inset the scrollport at the physical left only.
  • Values: auto, length, or percentage.
  • Initial value: auto. Not inherited.
  • Tip: pair with scroll-snap-align: start in LTR to see the left inset clearly.

One line: scroll-padding-left reserves space at the physical left of the scrollport.

Frequently Asked Questions

It insets the scrollport at the physical left edge. Snap and scroll targets stop after that inset instead of flush against the left.
The initial value is auto. Browsers usually treat that like 0px unless they choose another offset.
scroll-padding-left is always the physical left. scroll-padding-inline-start follows the inline flow, so it adapts with writing-mode and direction.
scroll-padding is the shorthand for all four sides. This longhand sets only the left.
Use it for fixed left sidebars, leading chrome, or extra space when panels snap to the left edge of a scroller.
It is Baseline and widely available since April 2021: Chrome 69+, Edge 79+, Firefox 68+, Safari 14.1+, Opera 56+. Safari 11–14 had partial support. Internet Explorer does not support it. It is a browser CSS property, not a Node.js feature.

Next: scroll-padding-right

Learn the physical longhand for the right scrollport inset.

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