CSS scroll-padding-block-start Property

scroll-padding-block-start is a CSS property that is used to define the padding that should be added to the top of an element when it is scrolled.

Syntax

scroll-padding-block-start: length | initial | inherit;

Values

The possible scroll-padding-block-start values are:

• length: Add padding to the top of the element when scrolled, where length is a number followed by a unit (e.g. 10px, 2rem).
• initial: Sets the property to its default value which is 0.
• inherit: Inherits the property from its parent element.

Usage

Use the scroll-padding-block-start property to add padding at the top of an element that is being scrolled. This is useful when you want to make sure that the content of the element is not hidden behind other elements when it scrolls.

.my-scrollable-element {
  scroll-padding-block-start: 20px;
}

/* Same result but with shorthand */
.my-scrollable-element {
  scroll-padding: 20px 0 0 0;
}

Browser Support

scroll-padding-block-start is supported by most modern browsers, including Firefox, Chrome, Safari, Opera, and Edge.

Conclusion

scroll-padding-block-start is a useful CSS property for adding padding to the top of an element when it is scrolled. It improves the user experience by making sure that no content is hidden behind other elements when scrolling. By setting this property, you can ensure that your web page looks great and functions properly on all devices.