CSS scroll-padding-block Property

The CSS scroll-padding-block property is part of the CSS Scroll-Linked Properties. It is used to set the padding area for the scrolling container along the block axis (vertical for a typical English text flow). This property is particularly useful when designing navigable sections of a webpage, allowing for smooth scrolling experiences and enhancing the overall user interface.

1. Definition

The scroll-padding-block property specifies the padding that should be applied to the scroll container when scrolling to an element. This means that when you navigate the content, the viewport will leave a specified amount of space at the top or bottom of the container.

2. Syntax

The syntax for the scroll-padding-block property is straightforward. It can be declared within a CSS rule using the following format:

selector {
    scroll-padding-block: value;
}

3. Value

The values for scroll-padding-block can be either specific length units, percentage, or keywords. Below we will explore each of these in more detail.

3.1 Length Units

Length units allow you to define an exact padding size. You can use various units such as pixels (px), ems, and rems. Here are some examples:

Unit	Example	Meaning
px	scroll-padding-block: 20px;	20 pixels of padding
em	scroll-padding-block: 2em;	2 times the size of the current font
rem	scroll-padding-block: 3rem;	3 times the size of the root element’s font

3.2 Percentage

You can also define the padding using percentages based on the height of the scrolling element. For example:

scroll-padding-block: 10%;

This would set the scroll padding to 10% of the container’s height.

3.3 Initial Value

The initial value of the scroll-padding-block property is 0, which implies that there is no additional padding provided by default.

3.4 Inherit Value

The inherit value allows the property to inherit the value from its parent element. You can set it like this:

scroll-padding-block: inherit;

4. Browser Support

As with any modern CSS property, it’s essential to know its browser compatibility. The scroll-padding-block property is generally supported in most modern browsers, but not in older versions. Below is a compatibility table:

Browser	Version	Support
Chrome	89+	✅
Firefox	86+	✅
Safari	15+	✅
Edge	89+	✅
Opera	75+	✅

5. Related Properties

Understanding related CSS properties can be beneficial. The following properties complement the scroll-padding-block:

• scroll-padding-inline: Similar to scroll-padding-block, but specifies the padding area for the inline axis.
• scroll-padding: A shorthand for setting both scroll-padding-block and scroll-padding-inline.
• scroll-margin-block: Specifies the margin area that an element will occupy on the block axis, affecting the scroll behavior.

6. Examples

Let’s see how to implement scroll-padding-block in practice. Below is a simple example of a scrollable container.

CSS for the Example

div {
    overflow-y: auto;
    height: 200px;
    border: 1px solid #ccc;
    scroll-padding-block: 30px;
}

Scroll Padding with Different Units Example

In this example, we will see how different units for scroll-padding-block work in practice:

div {
    scroll-padding-block: 20px;
}

Example with Percentage

FAQ Section

What is the main purpose of the scroll-padding-block property?

The main purpose of scroll-padding-block is to control the padding that is applied to the scroll container when it scrolls to a target element, enhancing the overall user experience.

Can I use scroll-padding-block with scroll-padding?

h3>Yes, you can use scroll-padding as a shorthand to specify both scroll-padding-block and scroll-padding-inline values simultaneously.

What happens if I do not set scroll-padding-block?

If you do not set scroll-padding-block, the browser will default to a value of 0, meaning there will be no additional padding applied during scrolling.

Is scroll-padding-block supported in all browsers?

No, it is supported in most modern browsers but may not work in older versions. Always check for browser compatibility.

How does scroll-padding-block affect layout?

While scroll-padding-block does not affect the layout directly, it influences the scroll behavior and how much space is left around elements when they are brought into view.