CSS scroll-margin-bottom Property

What You’ll Learn

The scroll-margin-bottom property adds bottom scroll offset to a target element. It is especially useful in scroll-snap layouts and when footer sections should not sit flush against the viewport bottom.

Introduction

The scroll-margin-bottom property in CSS is used to set the bottom scroll offset of an element when it is scrolled into view.

This property is part of the CSS Scroll Snap module and is widely used to control how close an element sits to the bottom edge of a scroll container when it snaps or becomes a scroll target. By using scroll-margin-bottom, you can keep elements a comfortable distance from the container’s bottom edge.

Definition and Usage

Apply scroll-margin-bottom to the element being scrolled to — snap items, footer sections, cards, or any anchor target.

It also works outside pure snap layouts: anchor links, scrollIntoView(), and keyboard focus scrolling all respect bottom scroll margin on the target.

📝 Syntax

The syntax for the scroll-margin-bottom property is straightforward and allows you to specify a length value.

element {
  scroll-margin-bottom: value;
}

Here, value can be any valid CSS length unit such as px, em, rem, %, etc.

Basic Example

.scroll-item {
  scroll-margin-bottom: 50px;
}

Related Properties

• scroll-margin-top, scroll-margin-left, scroll-margin-right
• scroll-margin — shorthand for all four sides
• scroll-margin-block-end — logical block-end offset

🎯 Default Value

The default value of the scroll-margin-bottom property is 0, meaning there is no additional margin applied by default.

💎 Property Values

When to Use scroll-margin-bottom

scroll-margin-bottom helps when the bottom of a scroll target needs breathing room:

• Scroll snapping — Keep snapped cards away from the container bottom.
• Last list item — Add space below the final panel in a vertical scroller.
• Footer links — Prevent footers from touching the viewport bottom.
• JavaScript scrolling — Offset targets reached with scrollIntoView().

For the top edge, use scroll-margin-top or the logical scroll-margin-block-start.

Examples Gallery

Start with the reference snap-container example, jump to a footer, use scrollIntoView(), and add bottom offset on the last snap card.

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

  .scroll-item {
    scroll-snap-align: start;
    scroll-margin-bottom: 50px;
  }
</style>

<div class="scroll-container">
  <div class="scroll-item">Item 1</div>
  <div class="scroll-item">Item 2</div>
</div>

footer {
  scroll-margin-bottom: 2rem;
}

.target {
  scroll-margin-bottom: 40px;
}

.card:last-child {
  scroll-margin-bottom: 24px;
}

scroll-margin-bottom vs logical properties

scroll-margin-bottom is a physical side property. In horizontal writing mode it often matches scroll-margin-block-end. For international layouts, prefer logical properties when the block axis may change.

See also the shorthand scroll-margin when you need offsets on multiple sides at once.

.physical { scroll-margin-bottom: 2rem; }
.logical { scroll-margin-block-end: 2rem; }

💡 Best Practices