CSS scroll-margin-bottom Property

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

Definition and Usage

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

It is a physical longhand: it always targets the bottom edge, even if writing mode changes. It is not inherited. The initial value is 0. It is one side of the scroll-margin shorthand. Pair it with scroll-snap-type and scroll-snap-align.

Physical longhand.

Standard-track and Baseline Widely available. Prefer scroll-margin-block-end when the layout may switch writing mode. Accepts a length only — not a percentage.

Syntax

CSS Syntax

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

Use units like px, rem, or em.

Values

Property Values

ValueDescriptionTry it
0Default. No outset on the bottom edgeTry it
<length>Outset such as 40px or 1remTry it
with snap endMost visible when the target snaps to its bottom edgeTry it
vs logical endSame idea as scroll-margin-block-end in horizontal writingTry it
initialResets to 0Try it
inheritTakes the parent’s scroll-margin-bottomTry it
Approach

How to Use scroll-margin-bottom

Set up vertical snap, then offset only the target’s bottom 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 end for this property).
  3. Set scroll-margin-bottom on the target that needs bottom 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; end shows this margin best
scroll-margin-bottomYesOutset on the bottom side only
Length valueYespx, rem, em — not %
Try it

Live Preview

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

Panels use scroll-snap-align: end. Only the bottom margin on panel 2 changes.

Scroll ↓
1
2
3

scroll-margin-bottom: 40px

Code

CSS Examples

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

Example 1 — Fixed Length Outset

Add 40px of breathing room past the target’s bottom edge.

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

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

  .target {
    scroll-margin-bottom: 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 end. scroll-snap-align: end uses each panel’s bottom edge in horizontal writing.
  3. Offset only the bottom. scroll-margin-bottom: 40px grows panel 2’s snap area on that one side.
  4. Scroll and compare. Panel 2 rests with 40px of space past its bottom 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: end;
  }

  .target {
    scroll-margin-bottom: 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 bottom edge.
  2. Pick a rem length. 1rem ties the outset to the root font size.
  3. Only the bottom changes. The other sides stay at the default 0.
  4. Scale-friendly. If the root font size grows, the snap gap grows with it.

Example 3 — Bottom Only, Not All Sides

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

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

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

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

Edge Cases & Pitfalls

If the bottom offset never shows, check snap align and whether you need 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.

align

Most obvious with scroll-snap-align: end

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

logical

Always bottom, not block-end

In vertical writing modes, “bottom” may not be the block-end edge. Prefer scroll-margin-block-end for writing-mode-safe layouts.

vs

Not the same as scroll padding

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

Compatibility

Browser Support

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

✓ Baseline · Widely available since 2021

scroll-margin-bottom

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-bottom Widely supported

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

Remember

Key Takeaways

  • Role: set a scroll margin on the bottom edge of a snap target only.
  • Values: lengths such as 40px or 1rem. No percentages.
  • Initial value: 0. Not inherited. Physical side of the scroll-margin shorthand.
  • Tip: pair with scroll-snap-align: end, or use scroll-margin-block-end for logical layouts.

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

Frequently Asked Questions

It sets the scroll margin on the bottom edge of a snap target. That outset enlarges the scroll snap area so snapping can stop a little past the bottom edge.
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-bottom is physical and always targets the bottom edge. scroll-margin-block-end is logical and follows the block axis, which can map to a different side in vertical writing modes.
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 April 2021: 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-margin-inline

Learn the logical shorthand for inline-axis scroll margins.

scroll-margin-inline 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-start Property CSS scroll-margin-inline Property