CSS - scroll-padding-inline-start

CSS scroll-padding-inline-start specifies the offsets for the start edge of the scrollport, 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-start = auto | <length-percentage>

CSS scroll-padding-inline-start - length Value

The following example demonstrates how to use the scroll-padding-inline-start property to set the offset for the start edge of the scrollport, 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-start: 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-start property.</h3> <p>scroll-padding-inline-start property sets the scroll padding of an element for the start edge 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-start - percentage Value

 <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-start: 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-start property.</h3> <p>scroll-padding-inline-start property sets the scroll padding of an element for the start edge 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-start - auto Value

The following example demonstrates how to use the scroll-padding-inline-start property to set the offsets of the start edge of scrollport (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-start: 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-start property.</h3> <p>scroll-padding-inline-start property sets the offsets of the start edge of the scrollport 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>

Print Page