CSS scroll-padding-inline-start Property

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

Definition and Usage

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

In horizontal LTR writing mode, inline-start is usually the left. It is the longhand paired with scroll-padding-inline-end, and both are set by scroll-padding-inline. It is not inherited.

Baseline Widely available.

Not deprecated. Logical longhand for the inline-start scrollport inset. Widely available since September 2021 (Safari 15+). Works on any scroll container, with or without snap.

Syntax

CSS Syntax

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

Percentages are relative to the scrollport size on the inline axis.

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 on the inline axisTry it
initialResets to autoTry it
inheritTakes the parent’s scroll-padding-inline-startTry it
Approach

How to Use scroll-padding-inline-start

Set it on the scroll container when content should clear the inline-start 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-inline-start to match start chrome or breathing room.
  4. Scroll — start-aligned targets stop after the inset.
PieceRequired?Role
Scroll containerYesWhere the property is declared
scroll-padding-inline-startYesInsets the inline-start edge of the scrollport
scroll-snap-align: startHelpfulMakes the start inset easy to see
Start chrome / gutterCommonMatch the inset to fixed leading UI
Try it

Live Preview

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

The amber band marks the inline-start inset (left in this LTR demo).

Scroll box
1
2
3

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

Code

CSS Examples

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

Example 1 — Length Inset at Inline-start

Reserve space at the start edge so snapped panels clear a leading band.

CSS
<style>
  .scroller {
    width: 260px;
    overflow-x: auto;
    display: flex;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: 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 on the inline axis. x mandatory locks panels sideways.
  3. Align to the start. scroll-snap-align: start aims at the inline-start edge.
  4. Inset that edge. 48px keeps snapped panels after the left band.

Example 2 — Percentage of the Scrollport

Size the start inset relative to the scroller width.

CSS
<style>
  .scroller {
    width: 260px;
    overflow-x: auto;
    display: flex;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: 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 here.
  2. Scales with the box. Wider scrollers get a larger start inset.
  3. Still logical. In vertical writing modes, the percentage follows the inline axis.
  4. Prefer lengths for fixed chrome. Match pixel UI with px or rem.

Example 3 — Auto (Default)

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

CSS
<style>
  .scroller {
    width: 260px;
    overflow-x: auto;
    display: flex;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: 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 inline-start 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 start clearance.

Edge Cases & Pitfalls

Start insets are the usual fix for leading chrome covering snap targets.

align

Use start snap to see the effect

With scroll-snap-align: end, an inline-start inset may look unused. Prefer start when testing the leading inset.

logical

Not always the physical left

In RTL or vertical writing-mode, inline-start moves. Prefer this longhand over scroll-padding-left when flow can change.

target

Set it on the scroller

Targets use scroll-margin-inline-start. The container uses scroll-padding-inline-start.

layout

It is not padding-inline-start

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

Compatibility

Browser Support

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

✓ Baseline · Widely available since Sep 2021

scroll-padding-inline-start

Chrome 69+, Edge 79+, Firefox 68+, Safari 15+, Opera 56+, Samsung Internet 10.1+. Internet Explorer has no support.

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

Bottom line: Safe for modern sites. Prefer the logical longhand when writing-mode or direction may change. Not a server runtime API.

Remember

Key Takeaways

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

One line: scroll-padding-inline-start reserves space at the inline-start of the scrollport — usually the left in LTR.

Frequently Asked Questions

It insets the scrollport at the inline-start edge. In horizontal LTR writing mode that is usually the left, so snap and scroll targets stop after that edge.
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-inline is the shorthand for both inline-start and inline-end. This longhand sets only the start side.
Use it for fixed start-side chrome, leading gutters, or extra space when panels snap to the inline-start edge of a scroller.
It is Baseline and widely available since September 2021: Chrome 69+, Edge 79+, Firefox 68+, Safari 15+, Opera 56+. Internet Explorer does not support it. It is a browser CSS property, not a Node.js feature.

Next: scroll-padding-left

Learn the physical longhand for the left scrollport inset.

scroll-padding-left 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-end Property CSS scroll-padding-left Property