Codestin Search App

CSS scroll-margin-left Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The scroll-margin-left property defines an offset that adjusts where an element should land relative to the left edge of its nearest scroll container when it is scrolled into view. Rather than changing the box model or the element’s position in layout, it influences scroll destination calculations so the element can stop some distance away from the container’s left edge instead of flush against it.

This property is a scroll-positioning hint used by user-driven and programmatic scrolling (for example, fragment navigation or Element.scrollIntoView) and by scroll snap operations. It does not change how the element occupies space or how other elements flow around it; it only affects the computed final scroll position. It commonly pairs with snap alignment behavior—see scroll-snap-align—and is often used alongside container-side spacing controls such as scroll-padding-left to produce consistent visual gaps when snapping or navigating.

Because "left" is a physical direction, consider logical alternatives when supporting different writing modes or directionality. For inline-start relative control you can use the logical counterpart scroll-margin-inline-start. Also note the distinction from layout margins: unlike margin-left, scroll-margin-left does not affect hit testing, stacking context, or layout reflow — it only modifies scroll calculations and the final viewport alignment of the element.

In practical use, scroll-margin-left is handy for keeping important content (such as headings, focused elements, or anchored sections) visible and not obscured by fixed sidebars or edge decorations when jumped to. It creates "breathing room" at the left edge of the scroller without altering document flow, improving usability and visual comfort during navigations and snap-driven scrolling.

Definition

Initial value: 0
Applies to: all elements
Inherited: no
Computed value: as specified
Animatable: by computed value type
JavaScript syntax: object.style.scrollMarginLeft

Interactive Demo

scroll-margin-left: 0;

scroll-margin-left: 20px;

scroll-margin-left: 2em;

Scroll »

Syntax

scroll-margin-left: <length>

Values

<length>An outset from the bottom edge of the scroll container.

Example

HTML

<nav class="top-nav">

  <a href="#item1">Item 1 (no margin)</a>

  <a href="#item2">Item 2 (with scroll-margin-left)</a>

  <a href="#item3">Item 3</a>

</nav>



<div class="scroll-wrap" tabindex="0">

  <section class="card" id="item1">

    <h2>Item 1</h2>

    <p>Target without scroll-margin-left.</p>

  </section>



  <section class="card with-margin" id="item2">

    <h2>Item 2</h2>

    <p>Target with scroll-margin-left: 48px.</p>

  </section>



  <section class="card" id="item3">

    <h2>Item 3</h2>

    <p>Another target.</p>

  </section>

</div>



<div class="marker" aria-hidden="true"></div>

CSS

body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  margin: 24px;
  background: #ffffff;
  color: #111827;
}

.top-nav {
  margin-bottom: 12px;
}

.top-nav a {
  display: inline-block;
  margin-right: 10px;
  padding: 8px 12px;
  background: #f3f4f6;
  color: #111827;
  border-radius: 6px;
  text-decoration: none;
}

.top-nav a:hover {
  background: #e5e7eb;
}

.scroll-wrap {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
}

.card {
  flex: 0 0 70%;
  min-width: 320px;
  height: 180px;
  background: linear-gradient(135deg, #60a5fa, #7c3aed);
  color: #fff;
  border-radius: 8px;
  padding: 16px;
  box-sizing: border-box;
  scroll-snap-align: start;
}

.card h2 {
  margin: 0 0 8px 0;
  font-size: 1.25rem;
}

.card p {
  margin: 0;
  opacity: 0.95;
}

/* The important part: offset the element when it is scrolled into view horizontally */
.with-margin {
  scroll-margin-left: 48px;
}

/* Visual marker showing the 48px offset on the left */
.marker {
  position: fixed;
  left: 48px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(255, 0, 0, 0.35);
  pointer-events: none;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS scroll-margin-left property. Hover over a browser icon to see the version that first introduced support for this CSS property.