CSS scroll-margin-block-start Property

What You’ll Learn

The scroll-margin-block-start property offsets a scroll target at the block-start edge. It is one of the most practical scroll-margin longhands for fixing sticky-header overlap on anchor links.

Introduction

The scroll-margin-block-start property in CSS is used to set the margin at the start of the block axis for an element when it is scrolled into view.

This property is particularly useful for controlling the position of an element when it is brought into view via scrolling, such as with scrollIntoView(). The block axis depends on the element’s writing mode, which means it will be vertical in horizontal writing modes and horizontal in vertical writing modes.

Definition and Usage

Apply scroll-margin-block-start to the element being scrolled to — section headings, chapter articles, snap panels, or any anchor target.

It is the block-start longhand of scroll-margin-block. On a typical English webpage, it often behaves like scroll-margin-top, but stays correct in logical layouts.

📝 Syntax

The syntax for the scroll-margin-block-start property is simple and allows you to set a margin using any CSS length value.

element {
  scroll-margin-block-start: value;
}

Here, value can be a length (e.g., 10px, 2em, 5%, etc.).

Basic Example

.target {
  scroll-margin-block-start: 50px;
}

Related Properties

• scroll-margin-block-end — offset at the block-end edge
• scroll-margin-block — shorthand for start and end
• scroll-margin-top — physical top offset

🎯 Default Value

The default value of the scroll-margin-block-start property is 0. This means that by default, no additional margin is added at the start of the block axis when the element is scrolled into view.

💎 Property Values

When to Use scroll-margin-block-start

scroll-margin-block-start solves the most common scroll-position problem on documentation sites:

• Sticky navigation — Keep section headings visible below a fixed or sticky header.
• Anchor links — Improve table-of-contents jumps on long pages.
• scrollIntoView() — Offset programmatic scroll targets.
• Scroll snapping — Add top breathing room on the first snapped panel.

For the block-end side (usually bottom), use scroll-margin-block-end instead.

Examples Gallery

Start with the reference container example, fix sticky-header overlap, add block-start space on the first snap panel, and use rem units with a fixed banner.

<style>
  .container {
    height: 200px;
    overflow-y: scroll;
  }

  .target {
    scroll-margin-block-start: 50px;
    background-color: lightblue;
  }
</style>

<div class="container">
  <p class="target">Scroll to me!</p>
</div>
<button onclick="document.querySelector('.target').scrollIntoView();">
  Scroll to Target
</button>

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

.panel:first-child {
  scroll-snap-align: start;
  scroll-margin-block-start: 20px;
}

article {
  scroll-margin-block-start: 3.5rem;
}

scroll-margin-block-start in the family

scroll-margin-block-start is the block-start longhand of scroll-margin-block. For the opposite side, see scroll-margin-block-end.

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

💡 Best Practices