CSS scroll-margin-inline Property

Description

The scroll-margin-inline CSS property is used to control the spacing or margin between an element and the edge of its containing scroll container along the inline (horizontal) axis. It is particularly useful when dealing with scrollable elements like images or text within a container. By adjusting the scroll-margin-inline property, you can ensure that there is a specified amount of space between the element and the container's edge, preventing the element from being too close to the edge when scrolling, thus improving the overall user experience and readability of content. This property helps web designers fine-tune the positioning of elements within scrollable areas.

Initial value: See individual properties
Applies to: all elements
Inherited: no
Computed value: See individual properties
Animatable: by computed value type
JavaScript syntax: object.style.scrolMarginInline

Interactive Demo

scroll-margin-inline: 0;

scroll-margin-inline: 40px 20px;

scroll-margin-inline: 4em 0;

scroll-margin-inline: 0px 3em;

Scroll »

Syntax

scroll-margin-inline: >length<{1,2}

Values

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

Example

HTML

<div class="scroller">

  <div>1</div>

  <div>2</div>

  <div>3</div>

  <div>4</div>

</div>

CSS

.scroller {
  text-align: left;
  width: 250px;
  height: 250px;
  overflow-x: scroll;
  display: flex;
  box-sizing: border-box;
  border: 1px solid #000;
  scroll-snap-type: x mandatory;
}

.scroller > div {
  flex: 0 0 250px;
  width: 250px;
  background-color: #663399;
  color: #fff;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: end;
}

.scroller > div:nth-child(2n) {
  background-color: #fff;
  color: #663399;
}

.scroller > div:nth-child(2) {
  scroll-margin-inline: 1rem;
}

.scroller > div:nth-child(3) {
  scroll-margin-inline: 2rem;
}

Result

Editor