1. css
  2. /properties
  3. /scroll-padding-inline

scroll-padding-inline

Overview

The scroll-padding-inline property is used to specify the scroll padding of elements in the inline direction within scroll containers. By establishing the offsets for the optimal viewing region of the scrollport which is the visible portion of the scroll container as seen by the user, it allows for adjustment of this region to account for areas that could be obscured by fixed-positioned elements or to add extra space around the scrollable content. Moreover, it has a crucial role in scroll snap containers, as the scroll padding offsets help effectively align the content at snap points.

Note: scroll-padding-inline serves as a shorthand for the flow-relative longhands scroll-padding-inline-start and scroll-padding-inline-end.

Examples and Usage

Following up on the shorthand context, we'll explore how scroll-padding-inline behaves when specified with one or two input values, applied as fixed units to a scroll container. These examples are primarily for demonstration purposes.

A single input value sets the same scroll padding for the inline start and inline end of the scroll container:

.scroll-container-example {
  scroll-padding-inline: 20px; /* Applies 20px scroll padding to the inline start and end */
}

When two input values are specified, the first applies to the inline start and the second to the inline end:

.scroll-container-example {
  scroll-padding-inline: 20px 40px; /* inline-start: 20px, inline-end: 40px */
}

In addition, the terms inline-start and inline-end adapt based on the writing-mode property. Specifically, for a horizontal-tb writing mode, inline-start corresponds to the left edge of the scroll container and inline-end to the right edge. Conversely, for vertical writing modes, inline-start corresponds to the top edge and inline-end to the bottom edge of the scroll container.

Values

The scroll-padding-inline property accepts the following values:

ValueDescription
autoThe user agent(browser) determines the offset. Typically, this is 0px, but the user agent may select a non-zero value if deemed more suitable.
<length-percentage>Sets an inward offset from the respective edges of the scrollport, which can be expressed in valid length units (px, em, vh, etc.), or as a percentage.

Associated Properties

  • scroll-padding-inline-start
  • scroll-padding-inline-end
  • scroll-padding-block
  • scroll-padding
  • scroll-margin
  • scroll-margin-inline
  • scroll-margin-block

Tips and Tricks

  • Just like its constituent and associated scroll padding properties, scroll-padding-inline accepts various values including lengths, percentages, and the auto keyword.

  • In CSS, the inline direction can be determined by the writing-mode and direction properties. scroll-padding-inline is flow-relative, meaning it adapts to the text flow direction determined by these properties and provides control over this direction in the context of scrolling behavior.

  • The scroll padding defined by scroll-padding-inline and other scroll padding-related properties, doesn't affect the overall layout size of an element but influences the scroll snap area size.

Browser Compatibility

For a more detailed breakdown, refer to the first link in the Useful Resources below.

BrowserChromeEdgeSafariFirefoxOperaInternet Explorer
SupportYes*Yes*Yes*Yes*Yes*No

Caution: Internet Explorer support data may be incorrect since MDN browser-compat-data no longer updates it. Also, early Edge versions used EdgeHTML, leading to mismatched version numbers. From version 79, Edge uses Chromium with matching version numbers.

Useful Resources

Can I use: scroll-padding-inline

W3C's Editor's Draft of CSS Scroll Snap Module Level 1: scroll-padding-inline

The CSS scroll-padding-inline-start Property

The CSS scroll-padding-inline-end Property