CSS scroll-padding-inline Property

Description

The scroll-padding-inline CSS property is used to control the spacing or padding added around the inline (horizontal) axis of scrollable elements. It allows web developers to define the minimum space that should be maintained between the content of a scrollable container and the container's edges when scrolling. This property is particularly useful for ensuring that content doesn't get too close to the container's edges, improving the user experience by preventing content from being partially obscured or clipped during scrolling interactions. It helps maintain a comfortable and visually pleasing layout within scrollable elements on web pages.

Initial value: See individual properties
Applies to: scroll containers
Inherited: no
Computed value: See individual properties
Animatable: by computed value type
JavaScript syntax: object.style.scrollPaddingInline

Interactive Demo

scroll-padding-inline: 0;

scroll-padding-inline: 20px;

scroll-padding-inline: 2em;

Scroll »

Syntax

scroll-padding-inline: auto | &tl;length-percentage [0,∞]>

Values

autoThe offset is determined by the user agent. This will generally be 0px, but a user agent is able to detect and do something else if a non-zero value is more appropriate.
&tl;length-percentage>An inwards offset from the corresponding edge of the scrollport, as a valid length or a percentage.

Example

HTML

<div id="container">

  <div class="blue"></div>

  <div class="green"></div>

  <div class="blue"></div>

  <div class="green"></div>

  <div class="blue"></div>

  <div class="green"></div>

  <div class="blue"></div>

</div>

CSS

#container {
  width: 60%;
  aspect-ratio: 3/2;
  padding: 0 40px;
  margin: auto;
  border: solid black 2px;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 20px;
}

.blue {
  background-color: lightblue;
  height: 95%;
  aspect-ratio: 5/3;
}

.green {
  background-color: lightgreen;
  height: 80%;
  aspect-ratio: 5/4;
}

.blue, .green {
  display: inline-block;
  margin: 2px;
  scroll-snap-align: none start;
}

Result

Editor