CSS scroll-padding-inline-start Property

What You’ll Learn

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

Introduction

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

This property is especially useful for horizontal carousels, overflow panels, and any scroll container where the first item should not sit flush against the inline-start edge — or where fixed side navigation covers the leading edge.

Definition and Usage

Apply scroll-padding-inline-start to the scroll container — such as a horizontal carousel with overflow-x: auto and scroll snapping enabled.

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

📝 Syntax

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

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

Basic Example

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

Related Properties

• scroll-padding-inline-end — inset at the inline-end edge
• scroll-padding-inline — shorthand for start and end
• scroll-padding-left — physical left inset

🎯 Default Value

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

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

• First carousel slide — Inset the scrollport so the opening slide is not clipped at the leading edge.
• Fixed side navigation — Offset snap stops when a sticky sidebar covers the start of the scroller.
• Horizontal snap panels — Add space before the first snap stop in a scroller.
• Logical layouts — Prefer inline-start over hard-coded left in RTL-aware sites.

For the inline-end side (usually right in LTR), use scroll-padding-inline-end instead.

Examples Gallery

Start with the reference horizontal scroll example, inset a snap carousel at inline-start, add leading-edge inset on a carousel, and use the longhand alone on a scroll box.

<style>
  .scroll-container {
    width: 300px;
    height: 200px;
    overflow: auto;
    scroll-padding-inline-start: 20px;
  }

  .content {
    width: 600px;
    height: 150px;
    background: linear-gradient(to right, #ff5733, #33ff57);
  }
</style>

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

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

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

.scroll-panel {
  scroll-padding-inline-start: 3rem;
}

scroll-padding-inline-start in the family

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

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

💡 Best Practices