CSS scroll-padding-block Property

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

Definition and Usage

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

In horizontal writing mode, that is usually top and bottom. Prefer it over physical scroll-padding when layout may change with writing-mode. 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-block: auto | <length-percentage> {1,2} | initial | inherit;

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

Values

Property Values

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

How to Use scroll-padding-block

Set it on the scroll container. Think “block-start / block-end,” not always “top / bottom.”

  1. Create a scroll container (overflow: auto or the document).
  2. Optionally enable scroll-snap-type on the block axis.
  3. Set scroll-padding-block (one or two values).
  4. Scroll or snap — targets stop inside the block insets.
PieceRequired?Role
Scroll containerYesWhere the shorthand is declared
scroll-padding-blockYesInsets block-start and block-end
Snap type / alignOptionalMakes the inset easy to see
writing-modeOptionalChanges which physical edges are block
Try it

Live Preview

Scroll the box. Change scroll-padding-block and watch where panels snap on the block axis.

Amber bands mark block-start (and block-end when set). In this demo, block = top/bottom.

Scroll box
1
2
3

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

Code

CSS Examples

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

Example 1 — Block-start Inset

Reserve space at block-start (top in horizontal writing) for a header band.

CSS
<style>
  .scroller {
    height: 200px;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scroll-padding-block: 48px 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 makes a scrollport.
  2. Snap on the block axis. Here y matches vertical flow.
  3. Two values. 48px 0 sets start inset; end stays 0.
  4. Logical mapping. In horizontal mode, start is top — like a fixed header offset.

Example 2 — Equal Block Padding

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

CSS
<style>
  .scroller {
    height: 200px;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scroll-padding-block: 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. 40px applies to start and end.
  2. Breathing room. Snap targets keep space from both block edges.
  3. Not layout padding. Panel boxes keep their size; only aiming changes.
  4. Inline untouched. Left/right (inline axis) are not set by this shorthand.

Example 3 — Different Start and End

Use two values when the header and footer need different insets.

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

  .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. First value = start. 48px insets block-start (top here).
  2. Second value = end. 24px insets block-end (bottom here).
  3. Match chrome. Pair values with a sticky header and a thinner footer.
  4. Same idea as padding. Shorthand order is start, then end.

Edge Cases & Pitfalls

Logical axes are the usual source of confusion.

axis

Block is not always top/bottom

With vertical writing-mode, the block axis runs horizontally. The shorthand still tracks flow, not physical top.

target

Set it on the scroller

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

inline

Inline sides need another property

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

layout

Not the same as padding-block

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

Compatibility

Browser Support

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

✓ Baseline · Widely available since Sep 2021

scroll-padding-block

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

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

Remember

Key Takeaways

  • Role: inset the scrollport on the block 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 top then bottom.

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

Frequently Asked Questions

It sets scrollport insets on the block axis only — block-start and block-end. In horizontal writing mode that is usually top and bottom.
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-block is logical and only affects the block axis, so it adapts with writing-mode.
One value sets both block-start and block-end. Two values set start then end.
No. The property works on any scroll container. 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-block-end

Learn the longhand for the block-end scrollport inset alone.

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