CSS scroll-padding-top Property

What You’ll Learn

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

Introduction

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

This property is especially useful for improving readability and usability when fixed headers, sticky navigation, or browser chrome would otherwise cover snapped content.

Definition and Usage

Apply scroll-padding-top 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 shorthand. Use it when only the top side of the scrollport needs inset.

📝 Syntax

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

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

Basic Example

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

Related Properties

• scroll-padding-bottom, scroll-padding-left, scroll-padding-right
• scroll-padding — shorthand for all four sides
• scroll-padding-block-start — logical block-start inset

🎯 Default Value

The default value of the scroll-padding-top 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-top

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

• Fixed headers — Inset the scrollport so top content is not hidden under fixed UI.
• First snap panel — Add space above the opening snap stop in a scroller.
• Scroll containers — Prevent snapped content from sitting flush against the container top.
• Overflow panels — Keep the first line of content visible below the scroll box edge.

For logical block-axis inset, consider scroll-padding-block-start instead. For the bottom edge, use scroll-padding-bottom.

Examples Gallery

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

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

  .snap-item {
    height: 200px;
    scroll-snap-align: start;
    background-color: lightcoral;
    margin-bottom: 10px;
  }
</style>

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

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

html {
  scroll-padding-top: 2rem;
}

.scroll-panel {
  scroll-padding-top: 3rem;
}

scroll-padding-top in the family

scroll-padding-top is the top longhand of scroll-padding. For the opposite side, see scroll-padding-bottom.

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

💡 Best Practices