CSS scroll-margin-right
The scroll-margin-right property adds extra space on the right side of an element when it is scrolled into view or aligned by scroll snapping.
Syntax
scroll-margin-right: 0;
scroll-margin-right: 1rem;
scroll-margin-right: 4rem;Example
.carousel-item {
scroll-snap-align: start;
scroll-margin-right: 1.5rem;
}This is useful in horizontal scrollers where the final position should leave space after the focused or snapped item.
When it helps
This property is often used in carousels, tab strips and horizontal galleries. It lets the snapped item keep visible space on its right side without changing the element's normal layout size.
For writing-mode-aware layouts, prefer scroll-margin-inline-end.
Common mistake
This property does not create visible space in the layout by itself. It changes where the browser positions the element during scroll operations.