CSS scroll-margin-inline-start Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The scroll-margin-inline-start CSS property is used to control the spacing or margin between the start edge of a scroll container (the edge from which scrolling begins) and the content inside it. It allows web developers to create a buffer space, preventing content from being too close to the edge of the scroll container when it is scrolled into view. This property is particularly useful for improving the readability and user experience of scrollable elements by ensuring that their content isn't obscured or cut off when scrolling.

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

Interactive Demo

scroll-margin-inline-start: 0;

scroll-margin-inline-start: 20px;

scroll-margin-inline-start: 2em;

Scroll »

Syntax

scroll-margin-inline-start: >length<

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: start;
}

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

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

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

Result

Editor