CSS scroll-margin-block-end Property

What You’ll Learn

The scroll-margin-block-end property offsets a scroll target at the block-end edge. It is useful when the bottom of an element should not sit flush against the viewport or scroll container when scrolled into view.

Introduction

The scroll-margin-block-end property in CSS is used to set the scroll offset at the block-end edge of an element when it is scrolled into view. Along the block axis, this is typically the bottom in horizontal writing modes.

This property is useful for creating space between the block-end side of an element and the scroll container edge, ensuring that the element is not too close to the viewport bottom when it becomes the scroll target.

Definition and Usage

Apply scroll-margin-block-end to the element being scrolled to — not to the scroll container itself. It works with anchor links, scrollIntoView(), focus navigation, and scroll snapping.

It is one longhand of the scroll-margin-block shorthand. Use it when only the block-end side needs adjustment.

📝 Syntax

The syntax for the scroll-margin-block-end property is simple and can be applied to any element.

element {
  scroll-margin-block-end: value;
}

Here, value can be a length value (e.g., 10px, 2em) or a percentage.

Basic Example

.target {
  scroll-margin-block-end: 50px;
}

Related Properties

• scroll-margin-block-start — offset at the block-start edge
• scroll-margin-block — shorthand for start and end
• scroll-margin-bottom — physical bottom offset

🎯 Default Value

The default value of the scroll-margin-block-end property is 0. This means that no additional margin is added by default when the element is scrolled into view.

💎 Property Values

When to Use scroll-margin-block-end

scroll-margin-block-end helps when the block-end side of a target needs breathing room:

• Footer links — Keep page footers from touching the viewport bottom.
• Last snap panel — Add space below the final item in a snap scroller.
• Scroll containers — Prevent targets from sitting flush against the container’s bottom edge.
• Logical layouts — Prefer block-end over hard-coded bottom in international sites.

For the block-start side (usually top), use scroll-margin-block-start instead.

Examples Gallery

Start with the reference container example, add block-end space on the last snap panel, link to a footer, and compare block-end-only offset on one section.

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

  .target {
    scroll-margin-block-end: 50px;
    background-color: yellow;
  }
</style>

<div class="container">
  <div class="target">Scroll to me!</div>
</div>

.panel:last-child {
  scroll-snap-align: start;
  scroll-margin-block-end: 24px;
}

footer {
  scroll-margin-block-end: 2rem;
}

#section-end {
  scroll-margin-block-end: 3rem;
}

scroll-margin-block-end in the family

scroll-margin-block-end is the block-end longhand of scroll-margin-block. For the opposite side, see scroll-margin-block-start.

/* These are equivalent when only block-end matters */
.a { scroll-margin-block-end: 2rem; }
.b { scroll-margin-block: 0 2rem; }

💡 Best Practices