Spacing
scroll-padding
Setting the scroll padding of an element.
Overview
| Class | Declarations |
|---|---|
scroll-p:<size> | scroll-padding: <size>;
|
scroll-p:<vertical>|<horizontal> | scroll-padding: <vertical> <horizontal>;
|
scroll-p:<top>|<horizontal>|<bottom> | scroll-padding: <top> <horizontal> <bottom>;
|
scroll-p:<top>|<right>|<bottom>|<left> | scroll-padding: <top> <right> <bottom> <left>;
|
scroll-pt:<size> | scroll-padding-top: <size>;
|
scroll-pr:<size> | scroll-padding-right: <size>;
|
scroll-pb:<size> | scroll-padding-bottom: <size>;
|
scroll-pl:<size> | scroll-padding-left: <size>;
|
scroll-px:<size> | scroll-padding-inline: <size>;
|
scroll-px:<inline-start>|<inline-end> | scroll-padding-inline: <inline-start> <inline-end>;
|
scroll-py:<size> | scroll-padding-block: <size>;
|
scroll-py:<block-start>|<block-end> | scroll-padding-block: <block-start> <block-end>;
|
scroll-pxs:<size> | scroll-padding-inline-start: <size>;
|
scroll-pxe:<size> | scroll-padding-inline-end: <size>;
|
scroll-pys:<size> | scroll-padding-block-start: <size>;
|
scroll-pye:<size> | scroll-padding-block-end: <size>;
|
Examples
Pad the scroll container
Use scroll-p:* on the scroll container to keep snapped or anchored content away from the container edges.
<div class="overflow:auto scroll-p:0.625rem"> ...</div>Generated CSS
@layer utilities { .scroll-p\:0\.625rem { scroll-padding: 0.625rem }}Reserve space for fixed headers
Use scroll-pt:* when vertical scrolling should stop below a sticky or fixed header.
<main class="overflow:auto scroll-pt:16x"> ...</main>Pad horizontal snapping
Use scroll-px:* on horizontal carousels so the first and last item can snap with visual breathing room.
<div class="overflow-x:auto snap-x scroll-px:4x"> ...</div>Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="scroll-p:0.625rem scroll-pt:16x@sm scroll-p:0@print">...</div>