CSS scroll-padding-block Property

Description

The scroll-padding-block property defines an inset on the block axis that the browser treats as part of the scroll container’s snapport and "visible" scroll area when aligning content into view. In practice this means the browser offsets automatic scrolling and scroll-snapping calculations so that elements are considered "in view" a little before they actually hit the container’s physical edge. Because it is a logical property, the axis it affects follows the writing mode and direction of the document — in a vertical writing mode it affects the vertical inset, while in horizontal or mixed writing modes it follows the logical block direction.

You commonly use scroll-padding-block to reserve space for overlays like sticky headers or footers so that programmatic scrolling (for example, calls that bring an element into view) and scroll-snap behavior do not position the target underneath those overlays. It operates at the container level and adjusts the scrollport rather than changing visual layout; for layout spacing you would use padding-block, while the related shorthand scroll-padding controls both the block and inline scroll insets together. Because it only affects the scrollable container’s reference region, it’s the right tool when you want the snapping or auto-scroll alignment to account for a persistent UI element without altering the element’s own box model.

This property interacts with scroll-snapping and programmatic scrolling: it changes the target offsets used by the snapping algorithm and by methods like element.scrollIntoView. To control how individual items participate in snapping you can use a matching concept on the child element such as scroll-margin-block, which influences where a particular element will land relative to the adjusted snapport. Also keep in mind that the overall snapping behavior is governed by the container’s snap settings—see scroll-snap-type—so scroll-padding-block is typically used in concert with those settings to achieve smooth, predictable alignment in complex UIs.

Definition

Initial value: See individual properties
Applies to: scroll containers
Inherited: no
Computed value: See individual properties
Animatable: by computed value type
JavaScript syntax: object.style.scrollPaddingBlock

Interactive Demo

scroll-padding-block: 0;

scroll-padding-block: 20px;

scroll-padding-block: 2em;

1

2

3

Scroll »

Syntax

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

Values

autoThe offset is determined by the user agent. This will generally be 0px, but a user agent is able 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

<header class="site-header">

    <div class="brand">Demo</div>

    <nav class="nav">

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

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

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

        <a href="#section4">Section 4</a>

    </nav>

</header>



<main class="scroll-container" tabindex="0">

    <section id="section1" class="panel">

        <div class="panel-content">

            <h2>Section 1</h2>

            <p>This is the first section. Click the nav links to see scroll-padding-block in action.</p>

        </div>

    </section>



    <section id="section2" class="panel">

        <div class="panel-content">

            <h2>Section 2</h2>

            <p>Scroll snapping plus scroll-padding-block keeps the section visible below the fixed header.</p>

        </div>

    </section>



    <section id="section3" class="panel">

        <div class="panel-content">

            <h2>Section 3</h2>

            <p>The header overlays the page; scroll-padding-block offsets the snapped position.</p>

        </div>

    </section>



    <section id="section4" class="panel">

        <div class="panel-content">

            <h2>Section 4</h2>

            <p>End of the demo.</p>

        </div>

    </section>

</main>

CSS

:root {
    --header-height: 64px;
}

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

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

/* Fixed header that overlays content */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    background: rgba(17, 24, 39, 0.8);
    color: #fff;
    backdrop-filter: blur(6px);
    z-index: 10;
}

.site-header .nav a {
    color: #fff;
    text-decoration: none;
    margin-left: 12px;
    padding: 8px 10px;
    border-radius: 6px;
    font-weight: 500;
}

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

/* Scrollable container with snapping and scroll-padding-block */
.scroll-container {
    height: 100vh;
    overflow-y: auto;

    /* Enable vertical scroll snapping */
    scroll-snap-type: y mandatory;

    /* Important: offset snapped/anchored positions by the header height */
    scroll-padding-block: var(--header-height);

    /* Smooth animated scroll for anchor links */
    scroll-behavior: smooth;

    /* The header overlays content, so no top margin here */
}

/* Each full-viewport panel snaps to the top (but will stop below the header) */
.panel {
    height: 100vh;
    scroll-snap-align: start;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    color: #fff;
}

.panel-content {
    max-width: 900px;
    text-align: center;
    background: rgba(255, 255, 255, 0.06);
    padding: 24px;
    border-radius: 12px;
}

.panel:nth-of-type(1) { background: linear-gradient(135deg, #5eead4 0%, #06b6d4 100%); }
.panel:nth-of-type(2) { background: linear-gradient(135deg, #fbcfe8 0%, #f472b6 100%); }
.panel:nth-of-type(3) { background: linear-gradient(135deg, #c7f9cc 0%, #4ade80 100%); }
.panel:nth-of-type(4) { background: linear-gradient(135deg, #c7d2fe 0%, #6366f1 100%); }

/* Improve focus visibility for keyboard navigation */
a:focus,
button:focus,
.scroll-container:focus {
    outline: 3px solid rgba(96, 165, 250, 0.6);
    outline-offset: 2px;
}

Result

Editor

Browser Support

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