CSS scroll-margin-block-start Property

Description

The scroll-margin-block-start property lets authors control the offset used when an element is brought into view along the block axis of the writing mode. When a scrolling operation targets an element — for example, programmatic scrolling (like calling scrollIntoView), following an in-page anchor, focusing an element that causes scrolling, or a scroll snap destination — the browser calculates the position where that element should end up in the scrollport; scroll-margin-block-start adds extra space between the element’s start edge in the block direction and the start edge of the scrollport so the element is not flush against the container edge. This adjustment affects the final scrolled position rather than element geometry during normal layout.

Because it is a scroll-offset property, scroll-margin-block-start does not participate in box model calculations, margin collapsing, or flow layout. Changing it does not move other elements or change the element’s position in its container; it only alters how the scroller positions the element when bringing it into view. For broader control of scroll offsets you can use the related shorthand scroll-margin to set offsets on multiple logical sides at once, and for manipulating the scroller’s own inset you can look at scroll-padding, which affects how the scrollport determines snap and visible edges.

Because this is a logical property it follows writing-mode and direction: "block-start" maps to the physical top/left/right/bottom depending on whether text flows horizontally or vertically and on the writing-mode and direction of the element. This makes it convenient for international layouts where the physical edge you want to offset changes with the writing system. If you need a similar visual spacing that actually participates in layout you might consider margin-block-start instead, but remember that margin-block-start alters layout and flow while scroll-margin-block-start only alters scrolling behavior. For scroll snapping scenarios, this property can be combined with snap alignment logic (see scroll-snap-align) to ensure snap targets land a comfortable distance from the container edge rather than being hidden under fixed headers or other UI chrome.

Practical uses include keeping focused form controls or navigated-to headings visible beneath a persistent header, improving keyboard and assistive technology behavior by ensuring content appears with an appropriate visual buffer, and fine-tuning the perceived position of snap points. Because it is scoped to the element being targeted and not the container, you can selectively give particular items extra offset (for example, the first item of a section) without altering the global scroll-port insets.

Definition

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

Interactive Demo

scroll-margin-block-start: 0;

scroll-margin-block-start: 20px;

scroll-margin-block-start: 2em;

1

2

3

Scroll »

Syntax

scroll-margin-block-start: <length>

Values

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

Example

HTML

<header class="site-header">

  <div class="brand">Demo: scroll-margin-block-start</div>

</header>



<nav class="top-nav">

  <a href="#section1">Section 1 (offset)</a>

  <a href="#section2">Section 2 (no offset)</a>

  <a href="#section3">Section 3 (larger offset)</a>

</nav>



<main>

  <section id="section1">

    <h2 class="heading offset">Section 1  -  Offset applied</h2>

    <p>First section content. Scroll here using the nav links to see the offset.</p>

    <p>Additional content to create scrolling space.</p>

  </section>



  <section id="section2">

    <h2 class="heading no-offset">Section 2  -  No offset</h2>

    <p>Second section content. This heading will sit behind the fixed header when scrolled to.</p>

    <p>More content to keep the page long enough for scrolling.</p>

  </section>



  <section id="section3">

    <h2 class="heading offset-large">Section 3  -  Larger offset</h2>

    <p>Third section with a larger scroll-margin-block-start value.</p>

    <p>Final filler content.</p>

  </section>

</main>

CSS

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

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth; /* smooth scrolling to better observe the offset */
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  line-height: 1.45;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  background: #0b1220;
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 1rem;
  z-index: 1000;
  box-shadow: 0 2px 6px rgba(2, 6, 23, 0.4);
}

.brand {
  font-weight: 600;
}

.top-nav {
  margin-top: calc(var(--header-height) + 8px);
  background: #ffffff;
  padding: 0.5rem 1rem;
  display: flex;
  gap: 1rem;
  border-bottom: 1px solid #e6e9ef;
  position: sticky;
  top: calc(var(--header-height) + 8px);
  z-index: 900;
}

.top-nav a {
  color: #0b1220;
  text-decoration: none;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}

.top-nav a:hover {
  background: #f1f5f9;
}

main {
  /* add top padding so content doesn't sit under the fixed header */
  padding: calc(var(--header-height) + 1rem) 1rem 4rem;
}

section {
  padding: 3rem 0;
  border-bottom: 1px dashed #e1e6ef;
}

.heading {
  margin: 0 0 1rem 0;
  font-size: 1.5rem;
}

/* Apply an offset so the heading appears below the fixed header when navigated to */
.heading.offset {
  scroll-margin-block-start: calc(var(--header-height) + 1rem);
}

/* No scroll-margin-block-start here  -  the heading can be hidden behind the header */
.heading.no-offset {
  /* intentionally no offset */
}

/* Larger offset example */
.heading.offset-large {
  scroll-margin-block-start: calc(var(--header-height) + 3rem);
}

Result

Editor

Browser Support

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