CSS scroll-margin-block-start Property

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

Definition and Usage

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

In a horizontal writing mode, block-start is usually the top. It is not inherited. The initial value is 0. It is one longhand of scroll-margin-block. Pair it with scroll-snap-type and scroll-snap-align.

Logical longhand.

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

Syntax

CSS Syntax

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

Use units like px, rem, or em.

Values

Property Values

ValueDescriptionTry it
0Default. No outset on the block-start edgeTry it
<length>Outset such as 40px or 1remTry it
with snap startMost visible when the target snaps to its block-start edgeTry it
vs physical topSame idea as scroll-margin-top in horizontal writingTry it
initialResets to 0Try it
inheritTakes the parent’s scroll-margin-block-startTry it
Approach

How to Use scroll-margin-block-start

Set up vertical snap, then offset only the target’s block-start 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-block-start on the target that needs start-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-block-startYesOutset on the block-start side only
Length valueYespx, rem, em — not %
Try it

Live Preview

Scroll the box vertically. Panel 2 is the snap target. Change scroll-margin-block-start and snap again.

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

Scroll ↓
1
2
3

scroll-margin-block-start: 40px

Code

CSS Examples

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

Example 1 — Fixed Length Outset

Add 40px of breathing room before the target’s block-start edge.

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

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

  .target {
    scroll-margin-block-start: 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 block-start edge.
  3. Offset only the start. scroll-margin-block-start: 40px grows panel 2’s snap area on that one side.
  4. Scroll and compare. Panel 2 rests with 40px of space before its start 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-block-start: 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 block-start edge.
  2. Pick a rem length. 1rem ties the outset to the root font size.
  3. Only the start changes. Block-end stays at the default 0.
  4. Scale-friendly. If the root font size grows, the snap gap grows with it.

Example 3 — Start Only, Not Both Sides

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

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

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

  .target {
    scroll-margin-block-start: 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 start room only. 2rem applies to block-start, not end.
  2. Shorthand alternative. scroll-margin-block: 2rem 0 would do the same job.
  3. Longhand is clearer. When only one edge matters, name that edge.
  4. Physical twin. In horizontal writing this matches scroll-margin-top.

Edge Cases & Pitfalls

If the start offset never shows, check snap align and the writing mode.

snap

Needs a snap container and align

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

align

Most obvious with scroll-snap-align: start

If you snap to end, a start-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-block-start value.

axis

Block-start follows writing mode

In vertical writing modes, block-start is not “top.” The logical start edge moves with writing-mode.

vs

Not the same as scroll padding

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

Compatibility

Browser Support

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

✓ Baseline · Widely available since 2021

scroll-margin-block-start

Chrome 69+, Firefox 68+, Safari 15+, 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 15+
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-block-start 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 block-start 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-block shorthand.
  • Tip: pair with scroll-snap-align: start so the start outset is easy to see.

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

Frequently Asked Questions

It sets the scroll margin on the block-start edge of a snap target. That outset enlarges the scroll snap area so snapping can stop a little before that start edge. In horizontal writing modes, block-start is usually the top.
The initial value is 0. There is no extra 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.
scroll-margin-block is the shorthand for both start and end. scroll-margin-block-start sets only the block-start side.
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 since September 2021: Chrome 69+, Firefox 68+, Safari 15+, Edge 79+, Opera 56+. Internet Explorer does not support it. It is a browser layout property, not a Node.js feature.

Next: scroll-margin-bottom

Learn the physical bottom-edge scroll margin property.

scroll-margin-bottom 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-block-end Property CSS scroll-margin-bottom Property