CSS scroll-margin Property

Definition and Usage

The scroll-margin shorthand sets outsets around an element’s scroll snap area. When that element is snapped to or scrolled into view, the browser leaves that much space from the edge of the scrollport.

It is a shorthand for scroll-margin-top, scroll-margin-right, scroll-margin-bottom, and scroll-margin-left. Set it on the target, not the scroll container. It does not change layout like margin. The longhands start at 0. It is not inherited.

CSS Syntax

Same 1–4 value pattern as margin. Example: scroll-margin: 4rem 0 0; Percentages are invalid.

Property Values

Common beginner pattern: scroll-margin-top: 4rem; (or scroll-margin: 4rem 0 0;) so a sticky header does not cover the target.

How to Use scroll-margin

Put the offset on the element you scroll to, sized to clear any fixed or sticky chrome.

1. Identify the scroll target (heading, section, snap item).
2. Measure how much sticky/fixed UI covers the top (or other edge).
3. Set scroll-margin (or a longhand like scroll-margin-top) on that target.
4. Optional: use scroll-padding on the container instead when every target needs the same inset.

Live Preview

A sticky bar covers the top of the scroll box. Change scroll-margin-top on the targets, then click a link.

CSS Examples

Each snippet focuses on scroll-margin. Extra styles stay minimal for study. Use Try It Yourself for a live editor.

<style>
  .box {
    height: 160px;
    overflow: auto;
  }
  header {
    position: sticky;
    top: 0;
    height: 40px;
  }
  section {
    height: 160px;
    scroll-margin-top: 40px;
  }
</style>

<p><a href="#b">Go to B</a></p>
<div class="box">
  <header>Menu</header>
  <section id="a">A</section>
  <section id="b">B</section>
</div>

<style>
  .box {
    height: 160px;
    overflow: auto;
  }
  section {
    height: 160px;
    scroll-margin: 24px;
  }
</style>

<p><a href="#b">Go to B</a></p>
<div class="box">
  <section id="a">A</section>
  <section id="b">B</section>
</div>

<style>
  .box {
    height: 160px;
    overflow: auto;
  }
  section {
    height: 160px;
    scroll-margin: 40px 8px;
  }
</style>

<p><a href="#b">Go to B</a></p>
<div class="box">
  <section id="a">A</section>
  <section id="b">B</section>
</div>

Key Takeaways