CSS scroll-padding-block-end Property

What You’ll Learn

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

Introduction

The scroll-padding-block-end property in CSS is part of the CSS Scroll Snap Module. It allows you to define padding at the end 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-end 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-end side of the scrollport needs inset.

📝 Syntax

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

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

Basic Example

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

Related Properties

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

🎯 Default Value

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

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

• Fixed footers — Inset the scrollport so bottom content is not hidden under fixed UI.
• Last snap panel — Add space below the final snap stop in a scroller.
• Scroll containers — Prevent snapped content from sitting flush against the container bottom.
• Logical layouts — Prefer block-end over hard-coded bottom in international sites.

For the block-start side (usually top), use scroll-padding-block-start instead.

Examples Gallery

Start with the reference scroll container example, inset a snap scroller at block-end, add page bottom inset, and use the longhand alone on a scroll box.

<style>
  .scroll-container {
    height: 200px;
    overflow-y: scroll;
    scroll-padding-block-end: 20px;
  }

  .content {
    height: 500px;
    background: linear-gradient(to bottom, #f06, #4a90e2);
  }
</style>

<div class="scroll-container">
  <div class="content"></div>
</div>

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

html {
  scroll-padding-block-end: 2rem;
}

.scroll-panel {
  scroll-padding-block-end: 3rem;
}

scroll-padding-block-end in the family

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

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

💡 Best Practices