CSS scroll-margin-left Property

Description

The scroll-margin-left CSS property allows you to specify the amount of space or margin that should be maintained to the left of a scroll container when it is horizontally scrolled. This property is particularly useful when dealing with elements like images or text within a scrollable container, ensuring that content remains visually separated from the container's edges even when scrolled. It helps improve the readability and aesthetics of scrollable content by creating a buffer zone on the left side, preventing the content from getting too close to the container's edge during horizontal scrolling.

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

Interactive Demo

scroll-margin-left: 0;

scroll-margin-left: 20px;

scroll-margin-left: 2em;

Scroll »

Syntax

scroll-margin-left: <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: 2/1;
  margin: auto;
  border: solid black 2px;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  scroll-snap-type: x mandatory;
}

.blue {
  background-color: lightblue;
  height: 95%;
  aspect-ratio: 4/3;
}

.green {
  background-color: lightgreen;
  height: 80%;
  aspect-ratio: 3/2;
}

.blue, .green {
  margin: 2px;
  display: inline-block;
  scroll-snap-align: start;
  scroll-margin-left: 20px;
}

Result

Editor