CSS scroll-margin-block Property

Definition and Usage

The scroll-margin-block property is a shorthand for scroll-margin-block-start and scroll-margin-block-end. It adds outsets to a snap target’s scroll snap area on the block axis.

In a horizontal writing mode that usually means top and bottom. It is not inherited. Both longhands start at 0. Pair it with scroll-snap-type on the container and scroll-snap-align on the target.

CSS Syntax

One value sets both sides. Two values set start then end.

Property Values

How to Use scroll-margin-block

Set up vertical snap, then offset the target’s snap area on the block axis.

1. Make a scroll container with overflow-y: auto (or scroll) and scroll-snap-type: y mandatory.
2. Mark snap targets with scroll-snap-align.
3. Set scroll-margin-block on the target that needs breathing room.
4. Use one length for both sides, or two lengths for start and end.

Live Preview

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

CSS Examples

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

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

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

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

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

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

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

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

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

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

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

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

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

Key Takeaways