CSS scroll-margin-top 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-top property defines an invisible offset that the browser uses when bringing an element into view through scrolling (for example via fragment navigation, focus, or programmatic scrolling methods). Instead of moving the element in the page layout, it adjusts the position at which that element is considered "in view" relative to the scrolling container’s start edge, effectively creating a buffer above the element so the element can appear lower in the viewport when scrolled to. This makes it a scrolling-only adjustment: the visual layout, hit testing, and document flow remain unchanged while the scroll target is shifted.

A common practical use for scroll-margin-top is to prevent anchored headings or focused inputs from being hidden under fixed-position headers. By applying the property to the target elements, you tell the browser to stop the scrolled-to position short of the element’s actual top edge so the element appears below the header. If you need to affect the container’s visible scrollport rather than individual elements, consider changing the container’s snapport padding via scroll-padding-top. For setting a consistent offset across multiple axes you can use the shorthand scroll-margin, while differences between this scrolling offset and normal layout displacement can often be clarified by comparing it with margin-top, which physically moves elements in the flow.

Interaction with other scroll-related behaviors is worth noting: scroll-margin-top influences where elements land when snapping behavior is in play, so it works together with properties that control snap alignment like scroll-snap-align. It also changes the endpoint for smooth or instantaneous programmatic scrolls (see scroll-behavior for how scrolling animations behave), because the browser computes the final offset using the scroll margin. Best practice is to apply scroll-margin-top to the elements that serve as anchors or navigation targets (headings, sections, form controls) rather than globally, so you get predictable offsets only where needed without affecting other interactions.

Definition

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

Interactive Demo

scroll-margin-top: 0;

scroll-margin-top: 20px;

scroll-margin-top: 2em;

Scroll »

Syntax

scroll-margin-top: <length>

Values

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

Example

HTML

<body>

  <header class="site-header">

    <nav class="nav">

      <a href="#section1">Section 1</a>

      <a href="#section2">Section 2</a>

      <a href="#section3">Section 3</a>

    </nav>

  </header>



  <main class="main">

    <section id="section1" class="content-section">

      <h2>Section 1</h2>

      <p>

        This is the first section. Click the links in the fixed header to jump to each

        section. The scroll-margin-top on each section prevents the fixed header from

        covering the section's heading when you navigate to the anchor.

      </p>

    </section>



    <section id="section2" class="content-section">

      <h2>Section 2</h2>

      <p>

        Example content for section two. The scroll-margin-top value offsets the target

        so the heading is visible below the fixed header.

      </p>

    </section>



    <section id="section3" class="content-section">

      <h2>Section 3</h2>

      <p>

        Final section. Try using fragment links (e.g., #section3) or the navigation above

        to see scroll-margin-top in action.

      </p>

    </section>

  </main>

</body>

CSS

:root {
  --header-height: 64px;
}

/* Fixed header at the top */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  background: #1e88e5;
  color: #ffffff;
  display: flex;
  align-items: center;
  padding: 0 18px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  z-index: 1000;
}

.nav a {
  color: #ffffff;
  margin-right: 14px;
  text-decoration: none;
  font-weight: 600;
}

/* Ensure main content doesn't sit under the fixed header */
.main {
  max-width: 900px;
  margin: 0 auto;
  padding-top: calc(var(--header-height) + 20px);
  padding-left: 16px;
  padding-right: 16px;
}

/* Each target section gets a scroll-margin-top so headings are visible when navigated to */
.content-section {
  padding: 64px 0;
  border-bottom: 1px solid #e6e6e6;
  scroll-margin-top: calc(var(--header-height) + 12px);
}

.content-section h2 {
  margin: 0 0 12px 0;
  font-size: 1.5rem;
}

.content-section p {
  margin: 0;
  line-height: 1.6;
  color: #333333;
}

Result

Editor

Browser Support

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