CSS scroll-padding Property

What You’ll Learn

The scroll-padding property insets the scroll snap area inside a scroll container. It is especially helpful for scroll snapping and page navigation when fixed headers or footers would otherwise hide snapped content at the container edges.

Introduction

The scroll-padding property in CSS is used to define the offset around the edges of a scroll container where the browser will stop scrolling when a user performs a scroll snap or navigates to a scroll destination.

This property helps control the positioning of content when using scroll snapping, ensuring that desired elements are fully visible and not obscured by other UI elements like fixed headers or footers.

Definition and Usage

Apply scroll-padding to the scroll container — such as html, an element with overflow: auto, or the element that has scroll-snap-type set.

Unlike regular padding, scroll-padding does not shift layout content. It only changes the inset of the scrollport where snapping and scroll positioning occur.

📝 Syntax

The syntax for the scroll-padding property allows you to specify padding for one or more sides of the scroll container.

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

Basic Example

html {
  scroll-padding-top: 50px;
}

Longhand Properties

• scroll-padding-top, scroll-padding-right, scroll-padding-bottom, scroll-padding-left
• scroll-padding-block, scroll-padding-inline
• scroll-padding-block-start, scroll-padding-block-end, scroll-padding-inline-start, scroll-padding-inline-end

Syntax Rules

• One to four values work like regular padding shorthand.
• Length units such as px, rem, and em are common.
• Percentages are relative to the scroll container’s dimensions.
• Set the inset on the scroll container, not on individual snap targets.

🎯 Default Value

The default value of the scroll-padding property is 0 for all sides, meaning no additional inset is applied to the scrollport by default.

💎 Property Values

When to Use scroll-padding

scroll-padding solves common scroll-position problems:

• Fixed headers — Inset the scrollport so snapped sections are not hidden under a fixed nav bar.
• Scroll snapping layouts — Improve full-page and in-container vertical or horizontal snap panels.
• Carousel tracks — Add side inset so first and last slides do not feel cramped at the edges.
• Nested scroll areas — Fine-tune snap stops inside modals, sidebars, and overflow boxes.

If you need to offset individual scroll targets instead, use scroll-margin on the target element.

Examples Gallery

Start with the reference fixed-header example, inset a page scrollport, try shorthand values, and use rem units to match header height.

<style>
  html {
    scroll-snap-type: y mandatory;
    scroll-padding-top: 50px;
  }

  header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 50px;
    background: #334155;
    color: #fff;
  }

  section {
    height: 100vh;
    scroll-snap-align: start;
  }
</style>

<header>Fixed Header</header>
<section style="background:lightcoral">Section 1</section>
<section style="background:lightblue">Section 2</section>

html {
  scroll-behavior: smooth;
  scroll-padding-top: 4rem;
}

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

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

scroll-padding vs scroll-margin

scroll-padding insets the scrollport on the container. scroll-margin offsets individual scroll targets. Both can solve fixed-header overlap — choose based on whether you control the container or each target.

Pair with scroll-behavior: smooth on documentation pages for polished in-page navigation.

html {
  scroll-behavior: smooth;
  scroll-padding-top: 4rem;
}

💡 Best Practices