CSS scroll-margin-top Property

Beginner
5 min read
Updated: Oct 2026
3 examples
Live preview
CSS scroll-margin-top offsetting the top edge of a snap target
Definition

Definition and Usage

The scroll-margin-top property sets the scroll margin on the physical top edge of a snap target. That outset enlarges the scroll snap area used when this box snaps to the snapport.

It always means “top,” no matter the writing mode. It is not inherited. The initial value is 0. It is one longhand of scroll-margin. Pair it with scroll-snap-type and scroll-snap-align. A common use is leaving room under a fixed header for in-page anchors.

Physical longhand.

Standard-track and Baseline Widely available. Prefer scroll-margin-block-start when writing mode may change. It accepts a length only — not a percentage.

Non-standard alias (legacy).

Older Safari used scroll-snap-margin-top. Prefer the standard scroll-margin-top name in new code.

Syntax

CSS Syntax

syntax.css
scroll-margin-top: <length> | initial | inherit;

Use units like px, rem, or em.

Values

Property Values

ValueDescriptionTry it
0Default. No outset on the top edgeTry it
<length>Outset such as 40px or 1remTry it
with snap startMost visible when the target snaps to its start (top in vertical LTR) edgeTry it
vs logical startSame idea as scroll-margin-block-start in horizontal-tbTry it
initialResets to 0Try it
inheritTakes the parent’s scroll-margin-topTry it
Approach

How to Use scroll-margin-top

Set up vertical snap, then offset only the target’s top edge.

  1. Make a scroll container with overflow-y: auto and scroll-snap-type: y mandatory.
  2. Mark snap targets with scroll-snap-align (often start for this property).
  3. Set scroll-margin-top on the target that needs top-side breathing room.
  4. Use a length such as 40px or 1rem.
PieceRequired?Role
Scroll containerYesoverflow-y + scroll-snap-type
scroll-snap-alignYesChooses which edge snaps; start shows this margin best
scroll-margin-topYesOutset on the physical top side only
Length valueYespx, rem, em — not %
Try it

Live Preview

Scroll the strip vertically. Panel 2 is the snap target. Change scroll-margin-top and snap again.

Panels use scroll-snap-align: start. Only the top margin on panel 2 changes.

Scroll ↓
1
2
3

scroll-margin-top: 40px

Code

CSS Examples

Each snippet focuses on scroll-margin-top. Use Try It Yourself for a live editor.

Example 1 — Fixed Length Outset

Add 40px of breathing room before the target’s top edge.

CSS
<style>
  .scroller {
    overflow-y: auto;
    scroll-snap-type: y mandatory;
  }

  .panel {
    scroll-snap-align: start;
  }

  .target {
    scroll-margin-top: 40px;
  }
</style>

<div class="scroller">
  <div class="panel">1</div>
  <div class="panel target">2</div>
  <div class="panel">3</div>
</div>
Try It Yourself

How It Works

  1. Enable vertical snap. scroll-snap-type: y mandatory makes the scroller stop on snap points.
  2. Snap to start. scroll-snap-align: start uses each panel’s start edge (top in normal pages).
  3. Offset only the top. scroll-margin-top: 40px grows panel 2’s snap area on that one side.
  4. Scroll and compare. Panel 2 rests with 40px of space before its top edge.

Example 2 — Rem Unit Outset

Use 1rem when you want the offset to scale with root font size.

CSS
<style>
  .scroller {
    overflow-y: auto;
    scroll-snap-type: y mandatory;
  }

  .panel {
    scroll-snap-align: start;
  }

  .target {
    scroll-margin-top: 1rem;
  }
</style>

<div class="scroller">
  <div class="panel">1</div>
  <div class="panel target">2</div>
  <div class="panel">3</div>
</div>
Try It Yourself

How It Works

  1. Same snap setup. The scroller still snaps on the start edge.
  2. Pick a rem length. 1rem ties the outset to the root font size.
  3. Only the top changes. Bottom stays at the default 0.
  4. Scale-friendly. If the root font size grows, the snap gap grows with it.

Example 3 — Top Only, Not Both Sides

Prefer the longhand when you only need the top edge offset.

CSS
<style>
  .scroller {
    overflow-y: auto;
    scroll-snap-type: y mandatory;
  }

  .panel {
    scroll-snap-align: start;
  }

  .target {
    scroll-margin-top: 2rem;
  }
</style>

<div class="scroller">
  <div class="panel">1</div>
  <div class="panel target">2</div>
  <div class="panel">3</div>
</div>
Try It Yourself

How It Works

  1. Ask for top room only. 2rem applies to top, not bottom.
  2. Shorthand alternative. scroll-margin: 2rem 0 0 0 would do the same job.
  3. Longhand is clearer. When only one edge matters, name that edge.
  4. Logical twin. In horizontal-tb this matches scroll-margin-block-start.

Edge Cases & Pitfalls

If the top offset never shows, check snap align and whether you meant a logical property.

snap

Needs a snap container and align

Without scroll-snap-type and scroll-snap-align, this property has nothing useful to offset during snap scrolling.

align

Most obvious with scroll-snap-align: start

If you snap to end, a top-only margin may look like it does nothing. Match the margin to the snapped edge.

%

Percentages are not valid

Use lengths only. 40% is not a valid scroll-margin-top value.

physical

Always top, even in other writing modes

Unlike scroll-margin-block-start, this never follows writing-mode. Prefer the logical property for multilingual layouts.

vs

Not the same as scroll padding

scroll-padding-top insets the container’s snapport. This property expands the target’s snap area.

Compatibility

Browser Support

scroll-margin-top is a browser layout property for scroll snap. Node.js, Deno, and Bun do not apply it.

✓ Baseline · Widely available since 2021

scroll-margin-top

Chrome 69+, Firefox 68+, Safari 14.1+, Edge 79+, Opera 56+, Samsung Internet 10.1+. Internet Explorer does not support it.

97% Modern browsers
Google Chrome 69+
Full support
Mozilla Firefox 68+
Full support
Apple Safari 14.1+
Full support
Microsoft Edge 79+
Full support
Opera 56+
Full support
Samsung Internet 10.1+
Full support
Internet Explorer No support
Not supported
scroll-margin-top Widely supported

Bottom line: Safe for modern scroll-snap UIs. Skip Internet Explorer. Pair with scroll-snap-type and usually scroll-snap-align: start.

Remember

Key Takeaways

  • Role: set a scroll margin on the physical top edge of a snap target only.
  • Values: lengths such as 40px or 1rem. No percentages.
  • Initial value: 0. Not inherited. Part of the scroll-margin shorthand.
  • Tip: pair with scroll-snap-align: start so the top outset is easy to see.

One line: scroll-margin-top gives a snap target breathing room on its top edge — after scroll snap is already set up.

Frequently Asked Questions

It sets the scroll margin on the physical top edge of a snap target. That outset enlarges the scroll snap area so snapping can stop a little before the top edge.
The initial value is 0. There is no extra top outset until you set one.
It mainly affects scroll snapping. You still need a scroll container with scroll-snap-type and a target with scroll-snap-align for the offset to show during snap scrolling. It is also useful for in-page anchors under a fixed header.
scroll-margin-top always targets the physical top side. scroll-margin-block-start follows the writing mode and may map to top or another edge.
No. Set it on the element that snaps. Percentages are not valid; use lengths such as px, rem, or em.
It is Baseline and widely available: Chrome 69+, Firefox 68+, Safari 14.1+, Edge 79+, Opera 56+. Internet Explorer does not support it. It is a browser layout property, not a Node.js feature.

Next: scroll-padding

Learn how to inset the snapport with scroll padding.

scroll-padding tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

5 people found this page helpful

CSS scroll-margin-right Property CSS scroll-padding Property