CSS scroll-padding-inline Property

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

Definition and Usage

The scroll-padding-inline shorthand insets the scrollport on the inline axis only. It sets scroll-padding-inline-start and scroll-padding-inline-end.

In horizontal writing mode with LTR direction, that is usually left and right. Prefer it over physical left/right when layout may change with writing-mode or direction. It is not inherited.

Baseline Widely available.

Not deprecated. Logical scroll-padding shorthand; available across modern browsers since September 2021 (Safari 15+). Applies to any scroll container, with or without snap.

Syntax

CSS Syntax

syntax.css
scroll-padding-inline: auto | <length-percentage> {1,2} | initial | inherit;

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

Values

Property Values

ValueDescriptionTry it
autoDefault. Browser chooses (usually 0px)Try it
<length>One length for both inline sides, e.g. 40pxTry it
two valuesStart then end, e.g. 48px 24pxTry it
<percentage>Percent of the scrollport on the inline axisTry it
initialResets both sides to autoTry it
inheritTakes the parent’s scroll-padding-inlineTry it
Approach

How to Use scroll-padding-inline

Set it on the scroll container. Think “inline-start / inline-end,” not always “left / right.”

  1. Create a horizontal scroll container (overflow-x: auto).
  2. Optionally enable scroll-snap-type: x.
  3. Set scroll-padding-inline (one or two values).
  4. Scroll or snap — targets stop inside the inline insets.
PieceRequired?Role
Scroll containerYesWhere the shorthand is declared
scroll-padding-inlineYesInsets inline-start and inline-end
Snap type / alignOptionalMakes the inset easy to see
Sidebars / chromeCommonMatch insets to fixed left/right UI
Try it

Live Preview

Scroll sideways. Change scroll-padding-inline and watch where panels snap on the inline axis.

Amber bands mark inline-start (and inline-end when set). In this LTR demo, inline = left/right.

Scroll box
1
2
3

scroll-padding-inline: 48px 0 — start inset only

Code

CSS Examples

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

Example 1 — Inline-start Inset

Reserve space at inline-start (left in LTR) for a sidebar band.

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

  .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-x defines the scrollport.
  2. Snap on the inline axis. Here x matches left-to-right flow.
  3. Two values. 48px 0 sets start inset; end stays 0.
  4. Logical mapping. In LTR horizontal mode, start is left — like a fixed sidebar offset.

Example 2 — Equal Inline Padding

One value insets both inline-start and inline-end.

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

  .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. One length. 40px applies to start and end.
  2. Breathing room. Snap targets keep space from both inline edges.
  3. Not layout padding. Panel boxes keep their size; only aiming changes.
  4. Block untouched. Top/bottom (block axis) are not set by this shorthand.

Example 3 — Different Start and End

Use two values when the left and right chrome need different insets.

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

  .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. First value = start. 48px insets inline-start (left here).
  2. Second value = end. 24px insets inline-end (right here).
  3. Match chrome. Pair values with a wide nav rail and a thinner edge gutter.
  4. Same idea as padding. Shorthand order is start, then end.

Edge Cases & Pitfalls

Logical axes and direction are the usual sources of confusion.

axis

Inline is not always left/right

With vertical writing-mode or RTL direction, inline-start may not be the physical left. The shorthand still tracks flow.

target

Set it on the scroller

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

block

Block sides need another property

Use scroll-padding-block for the block axis, or full scroll-padding for all four physical sides.

layout

Not the same as padding-inline

It does not push content. It only changes where scroll and snap aim inside the scrollport.

Compatibility

Browser Support

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

✓ Baseline · Widely available since Sep 2021

scroll-padding-inline

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

Bottom line: Safe for modern logical layouts. Prefer this over physical left/right when writing-mode or direction may change. Not a server runtime API.

Remember

Key Takeaways

  • Role: inset the scrollport on the inline axis only.
  • Values: one or two of auto, length, or percentage.
  • Initial value: auto per side. Not inherited.
  • Tip: two values mean start, then end — logical, not always left then right.

One line: scroll-padding-inline is the logical shorthand for inline-start and inline-end scrollport insets.

Frequently Asked Questions

It sets scrollport insets on the inline axis only — inline-start and inline-end. In horizontal writing mode that is usually left and right.
Each longhand starts at auto. Browsers usually treat that like 0px unless they choose another offset.
scroll-padding is the physical four-side shorthand. scroll-padding-inline is logical and only affects the inline axis, so it adapts with writing-mode and direction.
One value sets both inline-start and inline-end. Two values set start then end.
No. The property works on any scroll container. Horizontal snap makes the inset easier to see while scrolling.
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-inline-end

Learn the longhand for the inline-end scrollport inset.

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