CSS scroll-padding-inline-start

The scroll-padding-inline-start property in CSS is used to define the padding at the start of a scroll container. This padding is used to offset the scrolling position to ensure that a specified area is visible within the container when scrolling to a particular element.

By default, when scrolling to an element within a scroll container, the element will be aligned with the start of the container. By using scroll-padding-inline-start, you can add padding at the start of the container to ensure that the element is displayed with an offset from the start.

The scroll-padding-inline-start property takes a length value as its parameter, such as px, em, or %. This value determines the amount of padding to add at the start of the scroll container.

Result:

In the example above, we have created a scroll container with a width and height of 200px. We have also added a scroll-padding-inline-start of 20px to the container. Inside the container, there is a content with a width and height of 400px.

As a result, when scrolling to the content inside the container, there will be a padding of 20px at the start of the container, ensuring that the content is offset from the beginning of the container.