CSS scroll-padding-left

The scroll-padding-left property in CSS is used to set the padding area for the left side of an element when scrolling.

By setting the scroll-padding-left, you can define the spacing between the scrolling content and the edge of the scroll container on the left side.

Let's take a look at a simple example to understand how scroll-padding-left works:

Result:


    .scroll-box {
      width: 300px;
      height: 200px;
      overflow: scroll;
      scroll-padding-left: 20px;
    }

Scrollable content

In the example above, we have a scrollable box with a width of 300px and a height of 200px. By setting scroll-padding-left to 20px, we add a padding area of 20px on the left side of the scrollable content.

Now, let's see how the scroll-padding-left property can be used with different values to adjust the padding area:

Value	Description
scroll-padding-left: 10px;	Adds a padding area of 10px on the left side of the scrollable content.
scroll-padding-left: 0;	Removes any padding area on the left side of the scrollable content.
scroll-padding-left: inherit;	Applies the padding area from the parent element.

By adjusting the scroll-padding-left property, you can customize the spacing between the scrolling content and the edge of the scroll container on the left side.