CSS scroll-padding-block-start Tutorial

CSS scroll-padding-block-start

The scroll-padding-block-start property in CSS is used to define the padding area at the start of a scroll container. This padding area ensures that content is not obscured by fixed headers or footers when the user scrolls the container.

By setting the scroll-padding-block-start property, you can specify the space that should be reserved at the top of the scroll container when scrolling. This property helps in creating a better user experience by preventing the content from being hidden under fixed elements.

Let's see an example to understand how scroll-padding-block-start works:

Result:

This is a scrollable content area.

Scroll down to see the effect of scroll-padding-block-start.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi.

In the example above, we have a scrollable container with a height of 100px. The scroll-padding-block-start: 20px property ensures there is a padding area of 20px at the top of the container, preventing the content from hiding under fixed elements.

By adjusting the value of scroll-padding-block-start, you can customize the padding area according to your design requirements.

That's how you can use the scroll-padding-block-start property in CSS to control the padding area at the top of a scroll container.