CSS scroll-padding-inline Property

What You’ll Learn

The scroll-padding-inline property insets the scrollport on the inline axis inside a scroll container. It is the logical companion to physical left/right scroll padding and works well with horizontal scroll snapping.

Introduction

The scroll-padding-inline property in CSS is a shorthand property that sets the scroll padding of a scroll container in the inline dimension.

This property defines the space between the snap position and the edges of the scroll container on the inline axis (left and right in horizontal writing mode, or the corresponding sides in vertical writing modes). It is part of the CSS Scroll Snap module and helps create a better horizontal scroll snapping experience.

Definition and Usage

scroll-padding-inline is a logical shorthand for scroll-padding-inline-start and scroll-padding-inline-end. Apply it to the scroll container — such as a carousel wrapper with overflow: auto and scroll-snap-type: x mandatory.

In standard horizontal writing mode, inline-start maps to the left and inline-end maps to the right. That makes scroll-padding-inline: 2rem 1rem similar to setting left and right scrollport insets, but it stays correct if the writing mode or direction changes.

📝 Syntax

The syntax for the scroll-padding-inline property is straightforward. It can accept one or two values.

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

• If one value is specified, it applies the same inset to both inline-start and inline-end.
• If two values are specified, the first applies to inline-start and the second to inline-end.

Basic Example

.scroll-container {
  scroll-padding-inline: 20px;
}

Longhand Properties

• scroll-padding-inline-start — inset at the inline-start edge
• scroll-padding-inline-end — inset at the inline-end edge

Syntax Rules

• One value sets both inline-start and inline-end equally.
• Two values set inline-start first, then inline-end.
• Percentages are relative to the scroll container’s inline size.
• Set the inset on the scroll container, not on individual snap targets.

🎯 Default Value

The default value for the scroll-padding-inline property is auto, which means no extra inline-axis inset is applied unless you specify a length or percentage.

💎 Property Values

When to Use scroll-padding-inline

scroll-padding-inline is the right choice when inline-axis scrollport insets should follow logical layout:

• Horizontal scroll snapping — Inset snapped panels from container inline edges.
• Carousels — Add side breathing room on horizontal snap scrollers.
• International layouts — Prefer logical properties over hard-coded left/right rules.
• Side navigation — Inset inline-start so content is not hidden under fixed side UI.

For block-axis insets, use scroll-padding-block instead.

Examples Gallery

Start with the reference horizontal scroll example, set different inline-start and inline-end values, try a horizontal snap carousel, and use scroll-padding-inline-start with a fixed side nav.

<style>
  .scroll-container {
    width: 300px;
    height: 150px;
    overflow: auto;
    scroll-padding-inline: 20px;
    border: 1px solid #ccc;
  }

  .content {
    width: 600px;
    height: 100%;
  }
</style>

<div class="scroll-container">
  <div class="content">
    Scroll sideways to see the inline padding effect.
  </div>
</div>

.carousel {
  scroll-padding-inline: 2rem 1rem;
}

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

.panel {
  scroll-snap-align: start;
}

.carousel {
  scroll-padding-inline-start: 3.5rem;
}

scroll-padding-inline vs scroll-padding

scroll-padding is the physical shorthand for all four sides. scroll-padding-inline targets only the inline axis and is safer for multilingual layouts and RTL pages.

Pair with scroll-snap-type: x mandatory for horizontal carousels and with scroll-snap-align on each slide.

/* Physical shorthand */
.physical { scroll-padding-left: 2rem; }

/* Logical equivalent in horizontal LTR writing */
.logical { scroll-padding-inline-start: 2rem; }

💡 Best Practices