CSS scroll-margin-inline-end 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-end CSS property is used to define the minimum space, or margin, between the end edge of a scrolling container (like an overflowed element) and its scrolling content. This property is particularly useful in web design to ensure that content doesn't get too close to the container's edge, making it more visually appealing and easier to read. By setting this property, you can control the distance between the content and the container's end, providing a buffer zone for a smoother scrolling experience.

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

Interactive Demo

scroll-margin-inline-end: 0;

scroll-margin-inline-end: 20px;

scroll-margin-inline-end: 2em;

Scroll »

Syntax

scroll-margin-inline-end: >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: end;
}

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

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

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

Result

Editor