間距

滾動內邊距scroll-padding

Setting the scroll padding of an element.

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

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    }}

Use scroll-pt:* when vertical scrolling should stop below a sticky or fixed header.

<main class="overflow:auto scroll-pt:16x">    ...</main>

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 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>

Setting the scroll margin of an element.

Setting the ratio for the box.