CSS scroll-padding-block

The scroll-padding-block property in CSS allows you to set the padding of the scroll snap area. This means you can control the amount of space around the snap points when using the scroll-snap-type property.

Let's go over how to use the scroll-padding-block property with some examples:

Result:

Item 1

Item 2

Item 3

Item 4

Item 5

In this example, we have a container with a fixed height and width that has overflow-y: scroll to enable vertical scrolling. We have set the scroll snap type to y mandatory to make sure the items snap to the scroll positions. The scroll-padding-block of 20px adds extra space around the snap points.

Try adjusting the scroll-padding-block value to see how it affects the spacing between items when scrolling.