CSS scroll-margin-block-start Property

Description

The scroll-margin-block-start CSS property is used to control the spacing or margin between the start edge of a scroll container and the block-level content within it. When applied to an element, such as a heading or a block of text, this property specifies the minimum distance between the content and the start edge of the scroll container. It helps in ensuring that the content does not get too close to the edge, making it more visually pleasing and easier to read when scrolling. This property is particularly useful for improving the readability of content within scrollable elements, such as divs with overflow set to "auto" or "scroll," by creating a buffer zone between the content and the container's edge.

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

Interactive Demo

scroll-margin-block-start: 0;

scroll-margin-block-start: 20px;

scroll-margin-block-start: 2em;

Scroll »

Syntax

scroll-margin-block-start: <length>

Values

<length>An outset from the block end 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 {
  width: 80%;
  aspect-ratio: 3/1;
  padding: 40px 0;
  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: start none;
  scroll-margin-block-start: 20px;
}

Result

Editor