CSS - scroll-padding-inline

CSS scroll-padding-inline is a shorthand property that specifies the scroll padding of an element in the inline dimension.

Possible Values

  • <length-percentage> − A valid length or percentage value, defining an inwards offset from the corresponding edge of the scrollport.

    <auto> − An inwards offset from the corresponding edge of the scrollport determined by the user agent.

Applies to

All the scroll containers.

Syntax

scroll-padding-inline = [ auto | <length-percentage> ]{1,2}

CSS scroll-padding-inline - length Value

The following example demonstrates how to use the scroll-padding-inline property to set the scroll padding of the div element in the inline dimension, using a length value (20px).

<html>
<head>
<style>
   #container {
      width: 50%;
      height: 400px;
      aspect-ratio: 3/2;
      padding: 0 30px;
      border: solid black 2px;
      overflow-x: scroll;
      overflow-y: hidden;
      white-space: nowrap;
      scroll-snap-type: x mandatory;
      scroll-padding-inline: 20px;
   }

   .boxA {
      background-color: rgb(234, 234, 128);
      height: 75%;
      aspect-ratio: 5/3;
   }

   .boxB {
      background-color: lightblue;
      height: 60%;
      aspect-ratio: 5/4;
   }

   .boxA, .boxB {
      display: inline-block;
      margin: 2px;
      scroll-snap-align: none start;
   }
</style>
</head>
<body>
   <h3>CSS scroll-padding-inline property.</h3>
   <p>Scroll-padding-inline property sets the scroll padding of an element in the inline dimension.</p>

   <div id="container">
      <div class="boxA"></div>
      <div class="boxB"></div>
      <div class="boxA"></div>
      <div class="boxB"></div>
      <div class="boxA"></div>
    </div>
</body>
</html>

CSS scroll-padding-inline - percentage Value

The following example demonstrates how to use the scroll-padding-inline property to set the scroll padding of the div element in the inline dimension, using a percentage value (60%).

<html>
<head>
<style>
   #container {
      width: 50%;
      height: 400px;
      aspect-ratio: 3/2;
      padding: 0 30px;
      border: solid black 2px;
      overflow-x: scroll;
      overflow-y: hidden;
      white-space: nowrap;
      scroll-snap-type: x mandatory;
      scroll-padding-inline: 60%;
   }

   .boxA {
      background-color: rgb(234, 234, 128);
      height: 75%;
      aspect-ratio: 5/3;
   }

   .boxB {
      background-color: lightblue;
      height: 60%;
      aspect-ratio: 5/4;
   }

   .boxA, .boxB {
      display: inline-block;
      margin: 2px;
      scroll-snap-align: none start;
   }
</style>
</head>
<body>
   <h3>CSS scroll-padding-inline property.</h3>
   <p>Scroll-padding-inline property sets the scroll padding of an element in the inline dimension.</p>

   <div id="container">
      <div class="boxA"></div>
      <div class="boxB"></div>
      <div class="boxA"></div>
      <div class="boxB"></div>
      <div class="boxA"></div>
   </div>
</body>
</html>

CSS scroll-padding-inline - auto Value

The following example demonstrates how to use the scroll-padding-inline property to set the scroll padding of the div element in the inline dimension, using the keyword value (auto).

<html>
<head>
<style>
   #container {
      width: 50%;
      height: 400px;
      aspect-ratio: 3/2;
      padding: 0 30px;
      border: solid black 2px;
      overflow-x: scroll;
      overflow-y: hidden;
      white-space: nowrap;
      scroll-snap-type: x mandatory;
      scroll-padding-inline: auto;
   }

   .boxA {
      background-color: rgb(234, 234, 128);
      height: 75%;
      aspect-ratio: 5/3;
   }

   .boxB {
      background-color: lightblue;
      height: 60%;
      aspect-ratio: 5/4;
   }

   .boxA, .boxB {
      display: inline-block;
      margin: 2px;
      scroll-snap-align: none start;
   }
</style>
</head>
<body>
   <h3>CSS scroll-padding-inline property.</h3>
   <p>Scroll-padding-inline property sets the scroll padding of an element in the inline dimension.</p>

   <div id="container">
      <div class="boxA"></div>
      <div class="boxB"></div>
      <div class="boxA"></div>
      <div class="boxB"></div>
      <div class="boxA"></div>
   </div>
</body>
</html>

CSS scroll-padding-inline - Related Properties

Following is the list of CSS properties that are associated with scroll-padding-inline property:

Property Description
scroll-padding-inline-start Sets the offsets for the start edge in the inline dimension of the scrollport.
scroll-padding-inline-end Sets the offsets for the end edge in the inline dimension of the scrollport.
Advertisements