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. |
To Continue Learning Please Login
Login with Google