CSS scroll-padding-top Property

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

Definition and Usage

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

It always means “top,” no matter the writing mode. Set it on the scroll container, not on the snap target. It is one longhand of scroll-padding. It is not inherited. The initial value is auto.

Physical longhand.

Standard-track and Baseline Widely available. Prefer scroll-padding-block-start when writing mode may change. Lengths and percentages are valid.

Syntax

CSS Syntax

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

Percentages are relative to the scrollport height.

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 heightTry it
vs logical startSame idea as scroll-padding-block-start in horizontal-tbTry it
initialResets to autoTry it
inheritTakes the parent’s scroll-padding-topTry it
Approach

How to Use scroll-padding-top

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

  1. Create a scroll container (overflow: auto or the document).
  2. Optionally snap with scroll-snap-type and scroll-snap-align: start.
  3. Set scroll-padding-top to match a header height or breathing room.
  4. Scroll — start-aligned targets stop below the inset.
PieceRequired?Role
Scroll containerYesWhere the property is declared
scroll-padding-topYesInsets the top edge of the scrollport
scroll-snap-align: startHelpfulMakes the top inset easy to see
Header / chrome heightCommonMatch the inset to fixed top UI
Try it

Live Preview

Scroll the box. Panels snap to the start. Change the top inset and watch the gap at the top.

The amber band marks the top inset on the scroll container.

Scroll box
1
2
3

scroll-padding-top: 48px — start snap stops below the top band

Code

CSS Examples

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

Example 1 — Length Inset at Top

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-top: 48px;
  }

  .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 defines the scrollport.
  2. Snap on the y axis. y mandatory locks vertical panels.
  3. Align to the start. scroll-snap-align: start aims at the top edge.
  4. Inset that edge. 48px keeps snapped panels below the top band.

Example 2 — Percentage of the Scrollport

Size the top inset relative to the scroller height.

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

  .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.
  2. Scales with the box. Taller scrollers get a larger top inset.
  3. Still physical. The inset stays on the top edge even if writing mode changes.
  4. Prefer lengths for fixed headers. Match pixel chrome with px or rem.

Example 3 — Auto (Default)

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

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

  .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. Initial value. Omitting the property is the same as auto.
  2. Usually zero. Start-aligned panels snap flush to the top 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 header clearance.

Edge Cases & Pitfalls

Top insets are the usual fix for fixed headers covering snap targets.

align

Use start snap to see the effect

With scroll-snap-align: end, a top inset may look unused. Prefer start when testing the top inset.

physical

Always the physical top

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

target

Set it on the scroller

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

layout

It is not padding-top

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

Compatibility

Browser Support

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

✓ Baseline · Widely available since Apr 2021

scroll-padding-top

Chrome 69+, Edge 79+, Firefox 68+, Safari 14.1+, 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 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-top Widely supported

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

Remember

Key Takeaways

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

One line: scroll-padding-top reserves space at the top of the scrollport — ideal under fixed headers.

Frequently Asked Questions

It insets the scrollport at the physical top edge. Snap and scroll targets stop below that inset instead of flush against the top.
The initial value is auto. Browsers usually treat that like 0px unless they choose another offset.
scroll-padding-top is always the physical top. scroll-padding-block-start follows the block flow, so it adapts when writing-mode is vertical.
scroll-padding is the shorthand for all four sides. This longhand sets only the top.
Use it for fixed headers, top chrome, or extra space when panels snap to the top 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-snap-align

Learn which edge of a target snaps into the scrollport.

scroll-snap-align 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-right Property CSS scroll-snap-align Property