CSS scroll-padding-block Property

What You’ll Learn

The scroll-padding-block property insets the scrollport on the block axis inside a scroll container. It is the logical companion to physical top/bottom scroll padding and works well with scroll snapping.

Introduction

The scroll-padding-block property in CSS is a shorthand property that sets the scroll padding of a scroll container in the block dimension.

This property defines the space between the snap position and the edges of the scroll container on the block axis (top and bottom in horizontal writing mode, or the corresponding sides in vertical writing modes). It is part of the CSS Scroll Snap module and helps create a better scroll snapping experience.

Definition and Usage

scroll-padding-block is a logical shorthand for scroll-padding-block-start and scroll-padding-block-end. Apply it to the scroll container — such as html or an element with overflow: auto and scroll-snap-type.

In standard horizontal writing mode, block-start maps to the top and block-end maps to the bottom. That makes scroll-padding-block: 4rem 1rem similar to setting top and bottom scrollport insets, but it stays correct if the writing mode changes.

📝 Syntax

The syntax for the scroll-padding-block property is straightforward. It can accept one or two values.

element {
  scroll-padding-block: length | percentage | auto;
}

• If one value is specified, it applies the same inset to both block-start and block-end.
• If two values are specified, the first applies to block-start and the second to block-end.

Basic Example

.scroll-container {
  scroll-padding-block: 20px;
}

Longhand Properties

• scroll-padding-block-start — inset at the block-start edge
• scroll-padding-block-end — inset at the block-end edge

Syntax Rules

• One value sets both block-start and block-end equally.
• Two values set block-start first, then block-end.
• Percentages are relative to the scroll container’s block size.
• Set the inset on the scroll container, not on individual snap targets.

🎯 Default Value

The default value for the scroll-padding-block property is auto, which means no extra block-axis inset is applied unless you specify a length or percentage.

💎 Property Values

When to Use scroll-padding-block

scroll-padding-block is the right choice when block-axis scrollport insets should follow logical layout:

• Scroll snapping — Inset snapped panels from container block edges.
• Fixed headers — Inset block-start so content is not hidden under fixed UI.
• International layouts — Prefer logical properties over hard-coded top/bottom rules.
• Nested scroll areas — Fine-tune vertical snap stops inside overflow boxes.

For inline-axis insets, use scroll-padding-inline instead.

Examples Gallery

Start with the reference scroll-snap example, set different block-start and block-end values, try a scroll container, and use scroll-padding-block-start with a sticky header.

<style>
  .scroll-container {
    width: 300px;
    height: 200px;
    overflow: auto;
    scroll-snap-type: y mandatory;
    scroll-padding-block: 20px;
  }

  .scroll-item {
    height: 150px;
    scroll-snap-align: start;
  }
</style>

<div class="scroll-container">
  <div class="scroll-item">Item 1</div>
  <div class="scroll-item">Item 2</div>
</div>

html {
  scroll-padding-block: 4rem 1.5rem;
}

.snap-box {
  overflow: auto;
  scroll-snap-type: y mandatory;
  scroll-padding-block: 16px;
}

.panel {
  scroll-snap-align: start;
}

html {
  scroll-padding-block-start: 3.5rem;
}

scroll-padding-block vs scroll-padding

scroll-padding is the physical shorthand for all four sides. scroll-padding-block targets only the block axis and is safer for multilingual layouts.

Pair with scroll-behavior: smooth for animated anchor navigation and with scroll-snap-align for snapped carousels or section scrollers.

/* Physical shorthand */
.physical { scroll-padding-top: 4rem; }

/* Logical equivalent in horizontal writing */
.logical { scroll-padding-block-start: 4rem; }

💡 Best Practices