CSS scroll-margin-bottom Property

Description

The scroll-margin-bottom CSS property is used to specify the minimum margin between the bottom edge of an element and the viewport when scrolling. It allows web developers to control the space left at the bottom of the viewport when an anchor link or fragment identifier is used to navigate to a specific part of a webpage. By setting this property, you can ensure that the content you're navigating to is appropriately spaced from the bottom of the viewport, improving the overall user experience and readability, especially when dealing with fixed headers or footers.

Initial value: 0
Applies to: all elements
Inherited: no
Computed value: as specified
Animatable: by computed value type
JavaScript syntax: object.style.scrollMarginBottom

Interactive Demo

scroll-margin-bottom: 0;

scroll-margin-bottom: 20px;

scroll-margin-bottom: 2em;

Scroll »

Syntax

scroll-margin-bottom: <length>

Values

<length>An outset from the bottom edge of the scroll container.

Example

HTML

<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>

</div>

CSS

#container {
  position: relative;
  width: 80%;
  aspect-ratio: 3/1;
  margin: auto;
  border: solid black 2px;
  overflow-x: hidden;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

.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;
  scroll-margin-bottom: 20px;
}

Result

Editor