CSS scroll-margin-inline Property

This property sets a margin buffer for an element when it is snapped into view within a scroll container along the inline axis.

selector { scroll-margin-inline: <length> | <length> <length>; }
<length> Specifies a fixed distance for the scroll margin using units like px, em, rem, or vw.

Code Examples

A basic horizontal scroll snap container where each item maintains a 40px buffer from the start edge when snapped.

<style>
  .scroll-container {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    width: 100%;
    border: 2px solid #333333;
  }
  .item {
    flex: 0 0 80%;
    height: 200px;
    margin-right: 10px;
    background-color: #0066ff;
    scroll-snap-align: start;
    /* Creates a 40px buffer so the item doesn't touch the left edge */
    scroll-margin-inline: 40px;
  }
</style>
<div class="scroll-container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

An advanced gallery where clicking a slide updates its scroll margin and centers it smoothly using JavaScript.

<style>
  .gallery {
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x proximity;
    gap: 20px;
    padding: 20px;
  }
  .slide {
    flex: 0 0 300px;
    height: 200px;
    background-color: #cccccc;
    scroll-snap-align: center;
    scroll-margin-inline: 20px;
    transition: background-color 0.3s;
  }
</style>
<div class="gallery" id="myGallery">
  <div class="slide">Slide 1</div>
  <div class="slide">Slide 2</div>
  <div class="slide">Slide 3</div>
</div>
<script>
  const slides = document.querySelectorAll(".slide");
  slides.forEach(slide => {
    slide.addEventListener("click", () => {
      // Dynamically change the scroll margin and color via JS
      slide.style.scrollMarginInline = "100px";
      slide.style.backgroundColor = "#ffcc00";
      slide.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" });
    });
  });
</script>

Pro Tip

Use scroll-margin-inline to create a 'preview' effect in image carousels. By setting a specific margin, you can force the snapped element to stop slightly off-center, allowing the edge of the next or previous item to peek into the viewport. This provides a visual cue to the user that more content is available to be scrolled.

Deep Dive

The scroll-margin-inline property is a logical shorthand for scroll-margin-inline-start and scroll-margin-inline-end. Think of it like a parking sensor for your elements; it defines exactly how much space should remain between the element and the edge of the scroll container when a snap occurs. Because it is a logical property, it is direction-aware. In a standard horizontal left-to-right layout, it controls the left and right margins. If the writing mode changes to vertical, it automatically shifts to control the top and bottom. It does not affect the actual layout or flow of elements on the page; it only changes the snap area used by the browser's scroll-snapping engine. This is essential for ensuring content does not get cut off or sit flush against the container walls, providing a cleaner UI.

Best Practices

Always apply this property to the child elements that are targets of the scroll-snap, not the parent container. Use relative units like rem or percent to ensure the spacing looks good on all device sizes. This property is most effective when you have fixed UI elements, like a sticky navigation bar or a side menu, that might overlap your content if the snap position is exactly at the edge. By adding a scroll margin, you can effectively offset the snap point to account for those overlapping elements.

Common Pitfalls

A common mistake is forgetting that scroll-margin-inline only works if the parent container has scroll-snap-type enabled and the child has scroll-snap-align set to something other than none. Also, keep in mind that this is not the same as standard CSS margin. It will not push neighboring elements away in the document flow; it only adds 'invisible' padding to the element for the purpose of calculation during a scroll-snap event.

Accessibility

Properly configured scroll margins improve the user experience for individuals using screen magnifiers or those with cognitive disabilities by ensuring that active content is clearly framed and not partially obscured by the edges of the viewport. It helps maintain a predictable focal point during keyboard navigation through a list of items. Just ensure the margin isn't so large that it pushes content off-screen on very narrow mobile devices.

Dev Data Table: scroll-margin-inline property

default 0
animatable yes
inherited no
experimental no
year_intro 2018
year_standard 2021
js_syntax_1 element.style.scrollMarginInline = "20px";
js_syntax_2 element.style.setProperty("scroll-margin-inline", "40px 20px");
js_note When using JavaScript, the value must be a string including the unit. Since this is a shorthand property, you can provide one value for both sides or two values for start and end respectively.
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...