CSS scroll-margin-left Property

What You’ll Learn

The scroll-margin-left property offsets a scroll target at the left edge. It is useful when you want space between the left side of the viewport or scroll container and the element being scrolled into view.

Introduction

The scroll-margin-left property in CSS is used to set the left margin of an element when it is scrolled into view.

This property is particularly useful when you want to create space between the left edge of the viewport and the scrolled-to element, ensuring it is not flush against the edge.

Definition and Usage

Apply scroll-margin-left to the element being scrolled to — not to the scroll container itself. It works with anchor links, scrollIntoView(), focus navigation, and scroll snapping.

It is one longhand of the scroll-margin shorthand. In LTR layouts it often behaves like scroll-margin-inline-start, but it always targets the physical left edge.

📝 Syntax

The syntax for the scroll-margin-left property is straightforward. You can specify a length value using units such as px, em, rem, %, and more.

element {
  scroll-margin-left: value;
}

Here, value can be any valid CSS length value.

Basic Example

.target {
  scroll-margin-left: 50px;
}

Related Properties

• scroll-margin-right — offset at the right edge
• scroll-margin — shorthand for all four sides
• scroll-margin-inline-start — logical inline-start offset

🎯 Default Value

The default value of the scroll-margin-left property is 0. This means there is no additional margin applied when the element is scrolled into view by default.

💎 Property Values

When to Use scroll-margin-left

scroll-margin-left helps when the left side of a target needs breathing room:

• First carousel card — Keep the opening card from hugging the container’s left edge.
• Horizontal snap rows — Add space before the first snapped item when swiping sideways.
• Fixed side UI — Offset targets so they do not sit under a sticky left sidebar or toolbar.
• Anchor jumps — Improve in-page navigation when a target should not touch the left viewport edge.

For RTL or international layouts, consider scroll-margin-inline-start instead of hard-coded left rules.

Examples Gallery

Start with the reference page-scroll example, add left space on the first snap slide, improve a carousel opening panel, and apply left offset on one slide only.

<style>
  .scroll-margin-example {
    scroll-margin-left: 50px;
    margin-top: 100vh;
  }
</style>

<h1>CSS scroll-margin-left Example</h1>
<p>Scroll down to see the effect.</p>
<div class="scroll-margin-example">
  Scroll to this element
</div>

.slide:first-child {
  scroll-snap-align: start;
  scroll-margin-left: 24px;
}

.panel:first-child {
  scroll-margin-left: 2rem;
}

#slide-left {
  scroll-margin-left: 3rem;
}

scroll-margin-left in the family

scroll-margin-left is the left longhand of scroll-margin. For the opposite side, see scroll-margin-right.

/* These are equivalent when only left matters */
.a { scroll-margin-left: 2rem; }
.b { scroll-margin: 0 0 0 2rem; }

💡 Best Practices