CSS scroll-padding-right Property

What You’ll Learn

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

Introduction

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

This property is especially useful for horizontal carousels, snap rows, and any scroll container where the last item should not sit flush against the right edge.

Definition and Usage

Apply scroll-padding-right to the scroll container — such as a horizontal carousel with overflow-x: auto and scroll-snap-type: x mandatory.

It is one longhand of the scroll-padding shorthand. Use it when only the right side of the scrollport needs inset.

📝 Syntax

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

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

Basic Example

.scroll-container {
  scroll-padding-right: 50px;
}

Related Properties

• scroll-padding-left, scroll-padding-top, scroll-padding-bottom
• scroll-padding — shorthand for all four sides
• scroll-padding-inline-end — logical inline-end inset

🎯 Default Value

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

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

• Last carousel item — Inset the scrollport so the final slide is not clipped at the right edge.
• Horizontal snap rows — Add space after the last snap stop in a horizontal scroller.
• Trailing peek spacing — Leave room so the next slide partially shows at the right edge.
• Overflow panels — Prevent scrolled content from sitting flush against the container’s right edge.

For logical inline-end inset in RTL-aware layouts, consider scroll-padding-inline-end. For the left edge, use scroll-padding-left.

Examples Gallery

Start with the reference horizontal snap example, inset a snap row at the right, add trailing inset on a carousel, and use the longhand alone on a scroll box.

<style>
  .scroll-container {
    width: 300px;
    height: 200px;
    overflow: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-right: 50px;
    display: flex;
  }

  .scroll-item {
    flex: 0 0 100%;
    height: 100%;
    scroll-snap-align: start;
    margin-right: 10px;
    background-color: lightblue;
  }
</style>

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

.snap-box {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-right: 24px;
}

.carousel {
  scroll-padding-right: 2rem;
}

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

scroll-padding-right in the family

scroll-padding-right is the right longhand of scroll-padding. For the opposite side, see scroll-padding-left.

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

💡 Best Practices