CSS scroll-padding-inline

The scroll-padding-inline property in CSS is used to specify the amount of padding that should be applied inside the inline (horizontal) scrollable area of an element. This property is useful for controlling the spacing between the content and the edges of the scrollable area, making sure that content is not hidden under the scrollbar or the edges of the container.

The syntax for scroll-padding-inline is:

scroll-padding-inline: auto | length | initial | inherit;

Where:

auto: This is the default value. The browser sets the padding automatically to be equal to the width of the scrollbar.
length: Specifies a specific padding value. It can be in pixels, ems, rems, percentages, etc.
initial: Sets the property to its default value.
inherit: Inherits the property from its parent element.

Result:

1	John Doe
2	Jane Smith
3	Michael Brown
4	Sarah Johnson

In the example above, we have applied a scroll-padding-inline of 20 pixels to ensure that there is enough padding inside the inline scrollable area of the table. This prevents the content from being hidden under the scrollbar or the edges of the container.

By using the scroll-padding-inline property, you can enhance the user experience of horizontal scrollable elements by controlling the spacing around the content.