CSS scroll-margin-top Property

What You’ll Learn

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

Introduction

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

This property is particularly useful when working with CSS scroll snapping and fixed headers, as it allows you to adjust the scroll position to avoid overlapping content at the top of the viewport.

Definition and Usage

Apply scroll-margin-top 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 normal horizontal writing modes it often behaves like scroll-margin-block-start, but it always targets the physical top edge.

📝 Syntax

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

element {
  scroll-margin-top: value;
}

Here, value can be any valid CSS length value.

Basic Example

.target {
  scroll-margin-top: 20px;
}

Related Properties

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

🎯 Default Value

The default value of the scroll-margin-top 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-top

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

• Fixed headers — Keep section titles visible below a fixed navigation bar.
• Anchor links — Improve in-page jumps so headings are not hidden under sticky UI.
• Vertical snap panels — Add space above snapped sections in a scroll container.
• scrollIntoView() — Offset programmatic scroll targets the same way as hash links.

For vertical writing modes or international layouts, consider scroll-margin-block-start instead of hard-coded top rules.

Examples Gallery

Start with the reference fixed-header example, fix sticky nav anchor jumps, try vertical snap spacing, and match header height with rem units.

<style>
  body {
    height: 200vh;
    scroll-snap-type: y mandatory;
  }

  section {
    height: 100vh;
    scroll-snap-align: start;
    scroll-margin-top: 20px;
  }

  header {
    position: fixed;
    top: 0;
    width: 100%;
    background: #334155;
    color: #fff;
    padding: 10px;
    text-align: center;
  }
</style>

<header>Fixed Header</header>
<section style="background:lightcoral">Section 1</section>
<section style="background:lightblue">Section 2</section>

section[id] {
  scroll-margin-top: 4rem;
}

.panel {
  scroll-snap-align: start;
  scroll-margin-top: 24px;
}

#chapter-2 {
  scroll-margin-top: 3.5rem;
}

scroll-margin-top in the family

scroll-margin-top is the top longhand of scroll-margin. For the opposite side, see scroll-margin-bottom.

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

💡 Best Practices