CSS scroll-margin-inline-start Property

Sets the margin of the scroll snap area at the start of the inline axis, providing an offset when an element is scrolled into view.

selector { scroll-margin-inline-start: value; }

<length>	Specifies a fixed distance using units like px, em, or rem.
auto	The browser determines the scroll margin based on the element's computed values.

Code Examples

A basic horizontal scroll-snap container where each item stops 40px away from the start edge.

<style>
.scroll-container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  width: 300px;
  background-color: #eeeeee;
}
.item {
  flex: 0 0 200px;
  height: 100px;
  margin: 10px;
  background-color: #0088cc;
  scroll-snap-align: start;
  scroll-margin-inline-start: 40px;
}
</style>
<div class="scroll-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

An advanced implementation using JavaScript to dynamically adjust the scroll snap offset for a responsive gallery.

<style>
.gallery {
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  gap: 20px;
  padding: 20px;
  background-color: #333333;
}
.card {
  flex: 0 0 80%;
  height: 200px;
  background-color: #ffffff;
  scroll-snap-align: start;
  transition: scroll-margin 0.3s;
}
</style>
<div class="gallery" id="g1">
  <div class="card" style="scroll-margin-inline-start: 0px;">Card 1</div>
  <div class="card" style="scroll-margin-inline-start: 0px;">Card 2</div>
</div>
<script>
function adjustOffset(pixels) {
  const cards = document.querySelectorAll(".card");
  cards.forEach(card => {
    card.style.scrollMarginInlineStart = pixels + "px";
  });
}
// Example usage: Dynamic offset adjustment
adjustOffset(50);
</script>

Pro Tip

Think of this as a 'parking sensor' for your scroll position. You can use it to create a visual 'gutter' in a carousel without having to hack the actual padding or margin of your layout, keeping your CSS logic separate from your visual spacing.

Deep Dive

This property is part of the Logical Properties specification. Think of it as a smart version of scroll-margin-left. In a standard English layout (Left-to-Right), the inline-start is the left side. If the page is switched to a Right-to-Left language like Arabic, the inline-start automatically flips to the right side. It defines a 'buffer zone' around the element that the scroll container respects when snapping. This is strictly for the scroll snap area and does not affect the physical layout or spacing of elements on the page like a standard margin would.

Best Practices

Use this property when you want a specific element in a horizontal slider to have extra breathing room when it snaps into place. It is cleaner than using physical properties like scroll-margin-left because it future-proofs your work for internationalization. Always ensure your parent container has scroll-snap-type defined, otherwise this property will sit there doing nothing.

Common Pitfalls

A common mistake is expecting this to push other elements away in the document flow. It won't. It only impacts where the 'camera' stops when scrolling or snapping to that specific element. Also, beginners often forget that 'inline' refers to the horizontal axis in default writing modes; if you are looking for vertical spacing, you need the 'block' equivalent.

Accessibility

This property is a lifesaver for users navigating via keyboard. If you have a fixed header or a sidebar that might overlap content, using scroll margins ensures that when a user tabs to a link or scrolls to an anchor, the element is fully visible and not tucked under your UI elements.

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

default	0
animatable	yes
inherited	no
experimental	no
year_intro	2018
year_standard	2019
js_syntax_1	element.style.scrollMarginInlineStart = "20px";
js_syntax_2	element.style.setProperty("scroll-margin-inline-start", "20px");
js_note	When manipulating logical properties in JavaScript, remember that the property name is camelCased and corresponds to the writing direction of the document.
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 }