CSS scroll-padding Property

Beginner
5 min read
Updated: Oct 2026
3 examples
Live preview
CSS scroll-padding insetting the scrollport of a scroll container
Definition

Definition and Usage

The scroll-padding shorthand insets the optimal viewing region of a scrollport. Snap targets and scroll destinations stop inside that inset instead of flush against the edge.

It sets scroll-padding-top, scroll-padding-right, scroll-padding-bottom, and scroll-padding-left. It is not inherited. Use it for fixed headers, sidebars, or breathing room around snapped panels.

Baseline Widely available.

Not deprecated. Defined with scroll snap, but it applies to any scroll container — even when scroll-snap-type is none. Safari 11–14 had partial support for some scroll types.

Syntax

CSS Syntax

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

One to four values follow the same order as padding: top, right, bottom, left.

Values

Property Values

ValueDescriptionTry it
autoDefault. Browser chooses (usually 0px)Try it
<length>Fixed inset such as 40px or 3remTry it
<percentage>Percent of the scrollport sizeTry it
shorthand sides1–4 values, like 48px 0 0 for top onlyTry it
initialResets each side to autoTry it
inheritTakes the parent’s scroll-paddingTry it
Approach

How to Use scroll-padding

Set it on the scroll container — the element that scrolls, not the panels inside.

  1. Make a scroll container (overflow: auto or the document root).
  2. Optionally add scroll-snap-type and scroll-snap-align.
  3. Set scroll-padding to reserve space (for example a fixed header height).
  4. Scroll or snap — targets stop inside the inset region.
PieceRequired?Role
Scroll containerYesWhere scroll-padding is declared
scroll-padding valueYesInsets the optimal viewing region
Snap type / alignOptionalMakes the inset easy to see while snapping
Fixed chrome heightCommonMatch top padding to a sticky header
Try it

Live Preview

Scroll the box. Change scroll-padding and notice where each panel snaps.

The amber band marks a top inset. Snap targets stop below it when top padding is set.

Scroll box
1
2
3

scroll-padding: 48px 0 0 — top inset for a header-like band

Code

CSS Examples

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

Example 1 — Top Inset (Fixed Header Space)

Reserve space at the top so snapped panels clear a header band.

CSS
<style>
  .scroller {
    height: 200px;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scroll-padding: 48px 0 0;
  }

  .panel {
    height: 160px;
    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 scroller. overflow-y: auto makes a scrollport.
  2. Enable snap. scroll-snap-type: y mandatory locks panels on the y axis.
  3. Inset the top. 48px 0 0 reserves header space; other sides stay 0.
  4. Align panels. scroll-snap-align: start aims at that padded start edge.

Example 2 — Equal Padding on All Sides

Give every edge the same inset for breathing room.

CSS
<style>
  .scroller {
    height: 200px;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scroll-padding: 40px;
  }

  .panel {
    height: 160px;
    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 value. 40px applies to top, right, bottom, and left.
  2. Scrollport shrinks inward. Snap targets aim inside that frame.
  3. Not layout padding. Panel sizes stay the same; only scroll aiming changes.
  4. Try scrolling. Panels stop with space around the snap edge.

Example 3 — Percentage of the Scrollport

Size the inset relative to the scroller’s visible area.

CSS
<style>
  .scroller {
    height: 200px;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scroll-padding: 20% 0 0;
  }

  .panel {
    height: 160px;
    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 height here.
  2. Keep other sides zero. 20% 0 0 only insets the top.
  3. Scales with the box. Taller or shorter scrollers change the inset size.
  4. Good for fluid UI. Prefer lengths when matching a fixed header pixel height.

Edge Cases & Pitfalls

Most mistakes come from putting the property on the wrong element.

target

Set it on the scroll container

Panels use scroll-margin. The scroller (or html) uses scroll-padding.

layout

It is not regular padding

Content layout does not shift. Only scroll and snap aiming change.

header

Match fixed header height

For document anchors, set scroll-padding-top on html to the header height so headings stay visible.

snap

Snap makes the effect obvious

You can use it without snap, but snap demos show the inset clearly while scrolling.

Compatibility

Browser Support

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

✓ Baseline · Widely available since Apr 2021

scroll-padding

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

Bottom line: Safe for modern sites. Ideal for fixed headers and snap scrollers. Not a server runtime API.

Remember

Key Takeaways

  • Role: inset the scrollport’s optimal viewing region.
  • Values: auto, lengths, percentages — 1 to 4 sides like padding.
  • Initial value: auto per side. Not inherited.
  • Tip: put it on the scroller; use scroll-margin on the targets.

One line: scroll-padding reserves space inside the scrollport so targets do not hide under edges or headers.

Frequently Asked Questions

It insets the optimal viewing region of a scrollport. Scroll and snap targets stop inside that inset instead of flush against the container edge.
Each longhand starts at auto. The browser usually treats that like 0px, but may choose another offset when appropriate.
scroll-padding is set on the scroll container to inset the scrollport. scroll-margin is set on the target element being scrolled to.
padding changes layout and shifts content. scroll-padding only affects where scrolling and snapping aim inside the scrollport.
No. It is defined with scroll snap, but it applies to any scroll container, including document and fragment scrolling.
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-block

Learn the logical shorthand for block-start and block-end insets.

scroll-padding-block 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-top Property CSS scroll-padding-block Property