CSS - scroll-margin-block

CSS property scroll-margin-block is a shorthand property that controls the margin of the scroll snap area at the block axis (vertical axis in most cases). It defines the margin between the snapport's snapport edges and the snapport's scroll container box..

Possible Value

<length> - An outset from the corresponding edge of the scroll container.

Constituent properties

This property is shorthand for the following CSS properties:

Applies to

All elements

Syntax

scroll-margin-block = <length>{1,2}

CSS scroll-margin-block - Basic Example

The following example demonstrates the usage of scroll-margin-block property.

<html>
<head>
<style>
   #demoScroll {
      width: 75%;
      aspect-ratio: 16/9;
      padding: 20px;
      margin: auto;
      border: solid 3px #ddd;
      overflow-x: hidden;
      overflow-y: scroll;
      scroll-snap-type: y mandatory;
   }
   .snap-block {
      width: 80%; 
      aspect-ratio: 4/3; 
      scroll-snap-align: start none;
      scroll-margin-block: 40px;
   }
   .blue { background-color: #3498db; }
   .green { background-color: #2ecc71; }
   .yellow { background-color: #f1c40f; }
   .red { background-color: #e74c3c; }
</style>
</head>
<body>
<h3>scroll-margin-block</h3>
<p>Scroll through the colorful blocks.</p>
<div id="demoScroll">
   <div class="snap-block blue"></div>
   <div class="snap-block green"></div>
   <div class="snap-block yellow"></div>
   <div class="snap-block red"></div>
</div>
</body>
</html>