CSS scroll-margin-inline-end Property

This property defines the margin at the end of the inline axis of an element used for scroll snapping or navigation into view.

selector { scroll-margin-inline-end: value; }
<length> Defines a fixed distance from the end edge of the scroll container using standard units like px, em, or rem.

Code Examples

A basic horizontal scroll container where each item has a 40px snap margin at the end of the inline axis.

<style>
.scroll-container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  width: 300px;
  border: 2px solid #333333;
}
.item {
  flex: 0 0 250px;
  height: 150px;
  background: #0066cc;
  color: #ffffff;
  scroll-snap-align: end;
  scroll-margin-inline-end: 40px;
  margin-right: 10px;
}
</style>
<div class="scroll-container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

An advanced example showing how to dynamically update the scroll margin using JavaScript to change the snap behavior of a card gallery.

<style>
#gallery {
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  gap: 20px;
  padding: 20px;
}
.card {
  flex: 0 0 80%;
  height: 200px;
  background: #f4f4f4;
  scroll-snap-align: end;
  transition: scroll-margin-inline-end 0.3s;
}
</style>
<div id="gallery">
  <div class="card" id="c1">Card 1</div>
  <div class="card" id="c2">Card 2</div>
</div>
<button onclick="setBuffer()">Increase Buffer</button>
<script>
function setBuffer() {
  const cards = document.querySelectorAll(".card");
  cards.forEach(card => {
    card.style.scrollMarginInlineEnd = "100px";
  });
  console.log("Snap margin updated via JS");
}
</script>

Pro Tip

If you have a sticky header or a side-nav that overlaps your scroll area, you can use this property to offset the snap position so the element isn't hidden behind your UI. It acts as an invisible 'landing pad' for the scroll position.

Deep Dive

Think of this property as a buffer zone for your element. When a user scrolls through a container and an element snaps into place, or when they click a link that jumps to an ID on the page, the browser needs to know where that element should sit relative to the scroll port. The inline-end part is logical, meaning it adapts to the direction of the text. In a standard left-to-right setup, this affects the right side. If the language is right-to-left, it automatically flips to the left. Unlike standard margins, this does not push other elements away in the document flow; it only influences the snap area or the final resting position of a scroll operation.

Best Practices

Use this property when building horizontal galleries or sliders that utilize CSS Scroll Snapping. It ensures that your content doesn't slam right against the edge of the container, providing a clean visual gap. Stick to relative units like rem or em so the spacing scales naturally with your site's typography. Using logical properties like this instead of scroll-margin-right makes your codebase much more robust for international audiences.

Common Pitfalls

The biggest point of confusion is that scroll-margin is applied to the child element, while scroll-padding is applied to the parent container. If you set this and see no visual change in the layout, that is normal. It only kicks in during a scroll event or a snap action. Also, remember that if you haven't defined a scroll-snap-type on the parent, this property will have very little visible effect unless you are navigating via fragment identifiers.

Accessibility

Properly spacing elements within a scrollable area helps users with low vision or cognitive disabilities distinguish where one piece of content ends and another begins. It prevents content from being partially obscured by the scroll container's edge or custom scrollbars, ensuring a clear focal point when navigating via keyboard tab stops.

Dev Data Table: scroll-margin-inline-end property

default 0
animatable yes
inherited no
experimental no
year_intro 2018
year_standard 2021
js_syntax_1 element.style.scrollMarginInlineEnd = "20px";
js_syntax_2 element.style.setProperty("scroll-margin-inline-end", "20px");
js_note When manipulating this property via JavaScript, remember that the property name is camelCased and depends on the writing mode of the document to determine which physical side is affected.
browsers { "Chrome": "69", "Edge": "79", "Firefox": "68", "Safari": "14.1", "Opera": "56", "Chrome Android": "69", "Safari on iOS": "14.5", "Samsung Internet": "10.1", "Opera Mobile": "48" }
results render here...