CSS scroll-margin-inline-end

The scroll-margin-inline-end property adds extra space at the inline-end side of an element when it is snapped or scrolled into view. In left-to-right horizontal writing, inline-end usually maps to the right side.

Syntax

scroll-margin-inline-end: 0;
scroll-margin-inline-end: 2rem;

Example

.snap-item {
  scroll-snap-align: start;
  scroll-margin-inline-end: 2rem;
}

Use it when snapped items need breathing room near the edge of a horizontal scroller.

Logical direction

This is a logical property, so it follows writing mode and text direction. Use scroll-margin-right only when you specifically mean the physical right side.

Related CSS topics