CSS scroll-padding-block-start Property

What You’ll Learn

The scroll-padding-block-start property insets the scrollport at the block-start edge of a scroll container. It helps ensure content is not too close to the top edge when scrolling or scroll snapping.

Introduction

The scroll-padding-block-start property in CSS is part of the CSS Scroll Snap Module. It allows you to define padding at the start of a scroll container’s block axis, ensuring that content is not too close to the edge when it is scrolled into view.

This property is especially useful for improving the readability and usability of content within scrollable containers.

Definition and Usage

Apply scroll-padding-block-start to the scroll container — such as html or an element with overflow: auto and scroll snapping enabled.

It is one longhand of the scroll-padding-block shorthand. Use it when only the block-start side of the scrollport needs inset.

📝 Syntax

The syntax for the scroll-padding-block-start property is straightforward. It can be applied to any scroll container.

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

Basic Example

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

Related Properties

• scroll-padding-block-end — inset at the block-end edge
• scroll-padding-block — shorthand for start and end
• scroll-padding-top — physical top inset

🎯 Default Value

The default value of the scroll-padding-block-start property is auto, which means the user agent determines the padding based on its default settings unless you specify a length or percentage.

💎 Property Values

When to Use scroll-padding-block-start

scroll-padding-block-start helps when the block-start side of the scrollport needs inset:

• Fixed headers — Inset the scrollport so top content is not hidden under sticky or fixed navigation.
• First snap panel — Add space above the first snap stop in a vertical scroller.
• Scroll containers — Prevent snapped content from sitting flush against the container top.
• Logical layouts — Prefer block-start over hard-coded top in international sites.

For the block-end side (usually bottom), use scroll-padding-block-end instead.

Examples Gallery

Start with the reference snap container example, inset a snap scroller at block-start, add page top inset for fixed headers, and use the longhand alone on a scroll box.

<style>
  .scroll-container {
    width: 300px;
    height: 200px;
    overflow: auto;
    scroll-snap-type: y mandatory;
    scroll-padding-block-start: 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 class="scroll-item">Item 3</div>
</div>

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

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

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

scroll-padding-block-start in the family

scroll-padding-block-start is the block-start longhand of scroll-padding-block. For the opposite side, see scroll-padding-block-end.

/* These are equivalent when only block-start matters */
.a { scroll-padding-block-start: 2rem; }
.b { scroll-padding-block: 2rem 0; }

💡 Best Practices