CSS scroll-padding-top Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The scroll-padding-top property adjusts the internal top offset that the browser uses when bringing a point in a scroll container into view. It creates an invisible inset at the top edge of the scrollport that the browser treats as reserved space for alignment and snapping calculations — the point scrolled to will land just below that inset instead of flush with the container’s top edge. Importantly, this does not change the box model or the actual layout or size of any element; it only affects how scrolling and snap alignment are computed.

This property is commonly used together with container-level scroll padding controls such as scroll-padding, which sets all sides’ insets in a single declaration. It also influences how scroll snap behavior positions snap targets when a container uses snapping, so it interacts functionally with properties that control snapping behavior like scroll-snap-type. In those scenarios the inset created by scroll-padding-top alters the effective snap area so that snapped elements appear offset from the top as intended (for example, to accommodate a fixed header).

Contrast this with element-level offsets like scroll-margin-top, which are applied by the elements being scrolled to rather than by the scroll container. Use the container-side inset when you want a universal top offset for all scroll targets inside a particular scrollport (for instance, to keep content visible beneath a persistent toolbar), and use element-level margins when you need per-element control. Because scroll-padding-top only affects alignment, it is particularly useful for fragment links, programmatic focus/scroll-into-view actions, and keyboard navigation where preserving visible context (e.g., preventing content from being hidden under overlays or fixed headers) matters.

In practical use, set the property on the scrolling container (the element that has the scrolling context) and test with the kinds of scrolling interactions you care about — keyboard focus, fragment navigation, and snap scrolling — to ensure the offset behaves as expected. Because it doesn’t alter layout, it is a safe tool to reserve visual space for UI chrome without introducing additional spacing inside content flows.

Definition

Initial value: auto
Applies to: scroll containers
Inherited: no
Computed value: as specified
Animatable: by computed value type
JavaScript syntax: object.style.scrollPaddingTop

Interactive Demo

scroll-padding-top: 0;

scroll-padding-top: 20px;

scroll-padding-top: 2em;

Scroll »

Syntax

scroll-padding-top: auto | <length-percentage [0,∞]>>

Values

autoThe offset is determined by the user agent. This will generally be 0px, but the user agent is free to detect and do something else if a non-zero value is more appropriate.
<length-percentage>An inwards offset from the corresponding edge of the scrollport, as a valid <length> or a <percentage>.

Example

HTML

<body>

  <header class="site-header">

    <nav>

      <a href="#section1">Section 1</a>

      <a href="#section2">Section 2</a>

      <a href="#section3">Section 3</a>

    </nav>

  </header>



  <main class="content">

    <section id="section1">

      <h2>Section 1</h2>

      <p>This is the first section. Click the nav links to jump to sections while accounting for the fixed header using scroll-padding-top.</p>

    </section>



    <section id="section2">

      <h2>Section 2</h2>

      <p>This is the second section. The browser will offset the scrolled position so the heading is not hidden behind the fixed header.</p>

    </section>



    <section id="section3">

      <h2>Section 3</h2>

      <p>This is the third section. Try resizing the window or using keyboard navigation to observe smooth scrolling with the offset.</p>

    </section>

  </main>

</body>

CSS

/* Basic reset and layout */
* {
  box-sizing: border-box;
}

/* Apply smooth scrolling and reserve space at the top for the fixed header */
html {
  scroll-behavior: smooth;
  /* Ensure anchored targets are offset by the header height */
  scroll-padding-top: 80px;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: #111;
}

/* Fixed header */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: #0b5cff;
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 18px;
  z-index: 1000;
}

.site-header nav a {
  color: #fff;
  text-decoration: none;
  margin-right: 14px;
  padding: 6px 10px;
  border-radius: 6px;
  font-weight: 600;
}

.site-header nav a:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* Main content: add top padding so content isn't hidden behind the header */
.content {
  padding-top: 84px; /* a little more than header height to add breathing room */
}

section {
  min-height: 70vh;
  padding: 28px 20px;
  border-bottom: 1px solid #e6e6e6;
  background: #fff;
}

section:nth-of-type(odd) {
  background: #fbfdff;
}

section h2 {
  margin-top: 0;
  margin-bottom: 12px;
}

section p {
  margin: 0;
  line-height: 1.5;
  color: #333;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS scroll-padding-top property. Hover over a browser icon to see the version that first introduced support for this CSS property.