CSS - scroll-padding-block
CSS scroll-padding-block is a shorthand property specifies the scroll padding of an element in the block 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 container's scrollport.
Syntax
scroll-padding-block = [ auto | <length-percentage> ]{1,2}
CSS scroll-padding-block - length Value
The following example demonstrates how to use the scroll-padding-block property to set the padding of the scroll padding of the div element in the block dimension, using a length value (30px).
<html> <head> <style> #container { width: 50%; aspect-ratio: 3/1; padding: 40px 0; border: solid black 2px; overflow-x: hidden; overflow-y: scroll; scroll-snap-type: y mandatory; scroll-padding-block: 30px; } .boxA { background-color: rgb(234, 234, 128); width: 85%; aspect-ratio: 3/1; } .boxB { background-color: lightgreen; width: 70%; aspect-ratio: 4/1; } .boxA, .boxB { margin: 2px; scroll-snap-align: start none; } </style> </head> <body> <h3>CSS scroll-padding-block property.</h3> <p>Scroll-padding-block property sets the scroll padding of an element in the block 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-block - percentage Value
The following example demonstrates how to use the scroll-padding-block property to set the padding of the scroll padding of the div element in the block dimension, using a percentage value (60%).
<html> <head> <style> #container { width: 50%; aspect-ratio: 3/1; padding: 40px 0; border: solid black 2px; overflow-x: hidden; overflow-y: scroll; scroll-snap-type: y mandatory; scroll-padding-block: 60%; } .boxA { background-color: rgb(234, 234, 128); width: 85%; aspect-ratio: 3/1; } .boxB { background-color: lightgreen; width: 70%; aspect-ratio: 4/1; } .boxA, .boxB { margin: 2px; scroll-snap-align: start none; } </style> </head> <body> <h3>CSS scroll-padding-block property.</h3> <p>Scroll-padding-block property sets the scroll padding of an element in the block dimension. Here the value is a percentage value (60%).</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-block - auto Value
The following example demonstrates how to use the scroll-padding-block property to set the padding of the scroll padding of the div element in the block dimension, using the keyword value (auto).
<html> <head> <style> #container { width: 50%; aspect-ratio: 3/1; padding: 40px 0; border: solid black 2px; overflow-x: hidden; overflow-y: scroll; scroll-snap-type: y mandatory; scroll-padding-block: auto; } .boxA { background-color: rgb(234, 234, 128); width: 85%; aspect-ratio: 3/1; } .boxB { background-color: lightgreen; width: 70%; aspect-ratio: 4/1; } .boxA, .boxB { margin: 2px; scroll-snap-align: start none; } </style> </head> <body> <h3>CSS scroll-padding-block property.</h3> <p>Scroll-padding-block property sets the scroll padding of an element in the block dimension. Here the value given is auto.</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-block - Related Properties
Following is the list of CSS properties that are associated with scroll-padding-block property:
Property | Description |
---|---|
scroll-padding-block-start | Sets the offsets for the start edge in the block dimension of the scrollport. |
scroll-padding-block-end | Sets the offsets for the end edge in the block dimension of the scrollport. |
To Continue Learning Please Login
Login with Google