CSS scroll-padding-bottom Property


The scroll-padding-bottom property in CSS is used to set the minimum amount of space between the content of an element and its bottom scroll boundary. This property is particularly useful when dealing with scrollable elements, such as containers with overflowed content. By specifying a value for scroll-padding-bottom, you can ensure that there is a minimum padding at the bottom of the scrollable area, preventing the content from being too close to the edge when scrolled to the bottom. This can be helpful in enhancing the user experience by providing a more visually pleasing and user-friendly interface. The value of scroll-padding-bottom can be defined in various units, such as pixels, percentages, or other length units. It allows web developers to control the spacing at the bottom of the scrollable area without affecting the layout of the non-scrollable content within the element.

Initial value
Applies to
scroll containers
Computed value
as specified
by computed value type
JavaScript syntax

Interactive Demo

Scroll »


scroll-padding-bottom: auto | <length-percentage [0,∞]>>


  • autoThe offset is determined by the user agent. This will generally be 0px, but the user agent is free to detect and do something else if a non-zero value is more appropriate.
  • <length-percentage>An inwards offset from the corresponding edge of the scrollport, as a valid <length> or a <percentage>.


<div id="container">
<div class="blue"></div>
<div class="green"></div>
<div class="blue"></div>
<div class="green"></div>
<div class="blue"></div>
<div class="green"></div>
<div class="blue"></div>
#container {
  width: 80%;
  aspect-ratio: 3/1;
  margin: auto;
  border: solid black 2px;
  overflow-x: hidden;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-padding-bottom: 20px;

.blue {
  background-color: lightblue;
  width: 95%;
  aspect-ratio: 3/1;

.green {
  background-color: lightgreen;
  width: 80%;
  aspect-ratio: 4/1;

.blue, .green {
  margin: 2px;
  scroll-snap-align: end;

Browser Support

The following table will show you the current browser support for the CSS scroll-padding-bottom property.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 3rd January 2024