CSS scroll-padding-left Property

What You’ll Learn

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

Introduction

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

This property is especially useful for horizontal carousels, snap rows, and any scroll container where the first item should not sit flush against the left edge — or where fixed side navigation covers the leading side.

Definition and Usage

Apply scroll-padding-left 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 left side of the scrollport needs inset.

📝 Syntax

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

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

Basic Example

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

Related Properties

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

🎯 Default Value

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

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

• First carousel item — Inset the scrollport so the opening slide is not clipped at the left edge.
• Fixed side navigation — Offset snap stops when a sticky sidebar covers the left of the scroller.
• Horizontal snap rows — Add space before the first snap stop in a horizontal scroller.
• Overflow panels — Prevent scrolled content from sitting flush against the container’s left edge.

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

Examples Gallery

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

<style>
  .scroll-container {
    scroll-snap-type: x mandatory;
    overflow-x: scroll;
    display: flex;
    scroll-padding-left: 20px;
  }

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

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

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

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

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

scroll-padding-left in the family

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

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

💡 Best Practices