CSS - scroll-margin-inline

The scroll margins of an element in the inline (horizontal axis) dimension are set by the CSS scroll-margin-inline shorthand property.

In order to make it easier to snap this box to the snapport, the scroll-margin values specify the outsets that define the scroll snap region.

This area is computed by taking the border box that has been modified, finding its rectangular bounding box (which is aligned with the coordinate space of the scroll container), and adding the required outsets.

Possible Value

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

Constituent properties

This property is a shorthand for the following CSS properties:

Applies to

All elements

Syntax

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

CSS scroll-margin-inline - Basic Example

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

<html>
<head>
<style>
   #demoScroll {
      width: 90%;
      aspect-ratio: 16/9;
      padding: 20px;
      margin: auto;
      border: solid 3px #333;
      overflow-x: auto; 
      overflow-y: hidden;
      white-space: nowrap; 
   }
   .snap-block {
      width: 99%;
      height: 90%;
      scroll-snap-align: start;
      scroll-margin-inline: 5px; 
      border-radius: 10px;
      background-color: #3498db;
      display: inline-block;
      margin-right: 20px; 
   }
   .color-block:nth-child(2n) {
      background-color: #27ae60; 
   }
   .color-block:nth-child(3n) {
      background-color: #f39c12; 
   }
   .color-block:nth-child(4n) {
      background-color: #e74c3c; 
   }
   .color-block:nth-child(5n) {
      background-color: #9b59b6; 
   }
</style>
</head>
<body>
<h3>scroll-margin-inline</h3>
<p>Scroll through the inline scrollable blocks.</p>
<div id="demoScroll">
   <div class="snap-block"></div>
   <div class="snap-block"></div>
   <div class="snap-block"></div>
   <div class="snap-block"></div>
   <div class="snap-block"></div>
   <div class="snap-block"></div>
   <div class="snap-block"></div>
</div>
</body>
</html>