Scroll Padding

Controls all of the scroll paddings of an element simultaneously.

Class	Style
`sp-0`	`scroll-padding: 0rem;`
`sp-1`	`scroll-padding: 0.25rem;`
`sp-2`	`scroll-padding: 0.5rem;`
`sp-3`	`scroll-padding: 0.75rem;`
`sp-4`	`scroll-padding: 1rem;`
`sp-5`	`scroll-padding: 1.25rem;`
`sp-6`	`scroll-padding: 1.5rem;`
`sp-7`	`scroll-padding: 1.75rem;`
`sp-8`	`scroll-padding: 2rem;`
`sp-9`	`scroll-padding: 2.25rem;`
`sp-10`	`scroll-padding: 2.5rem;`
`sp-11`	`scroll-padding: 2.75rem;`
`sp-12`	`scroll-padding: 3rem;`
`sp-13`	`scroll-padding: 3.25rem;`
`sp-14`	`scroll-padding: 3.5rem;`
`sp-15`	`scroll-padding: 3.75rem;`
`sp-16`	`scroll-padding: 4rem;`
`sp-17`	`scroll-padding: 4.25rem;`
`sp-18`	`scroll-padding: 4.5rem;`
`sp-19`	`scroll-padding: 4.75rem;`
`sp-20`	`scroll-padding: 5rem;`
`sp-21`	`scroll-padding: 5.25rem;`
`sp-22`	`scroll-padding: 5.5rem;`
`sp-23`	`scroll-padding: 5.75rem;`
`sp-24`	`scroll-padding: 6rem;`
`sp-25`	`scroll-padding: 6.25rem;`
`sp-26`	`scroll-padding: 6.5rem;`
`sp-27`	`scroll-padding: 6.75rem;`
`sp-28`	`scroll-padding: 7rem;`
`sp-29`	`scroll-padding: 7.25rem;`
`sp-30`	`scroll-padding: 7.5rem;`
`sp-31`	`scroll-padding: 7.75rem;`
`sp-32`	`scroll-padding: 8rem;`
`sp-33`	`scroll-padding: 8.25rem;`
`sp-34`	`scroll-padding: 8.5rem;`
`sp-35`	`scroll-padding: 8.75rem;`
`sp-36`	`scroll-padding: 9rem;`
`sp-37`	`scroll-padding: 9.25rem;`
`sp-38`	`scroll-padding: 9.5rem;`
`sp-39`	`scroll-padding: 9.75rem;`
`sp-40`	`scroll-padding: 10rem;`
`sp-41`	`scroll-padding: 10.25rem;`
`sp-42`	`scroll-padding: 10.5rem;`
`sp-43`	`scroll-padding: 10.75rem;`
`sp-44`	`scroll-padding: 11rem;`
`sp-45`	`scroll-padding: 11.25rem;`
`sp-46`	`scroll-padding: 11.5rem;`
`sp-47`	`scroll-padding: 11.75rem;`
`sp-48`	`scroll-padding: 12rem;`
`sp-49`	`scroll-padding: 12.25rem;`
`sp-50`	`scroll-padding: 12.5rem;`
`sp-51`	`scroll-padding: 12.75rem;`
`sp-52`	`scroll-padding: 13rem;`
`sp-53`	`scroll-padding: 13.25rem;`
`sp-54`	`scroll-padding: 13.5rem;`
`sp-55`	`scroll-padding: 13.75rem;`
`sp-56`	`scroll-padding: 14rem;`
`sp-57`	`scroll-padding: 14.25rem;`
`sp-58`	`scroll-padding: 14.5rem;`
`sp-59`	`scroll-padding: 14.75rem;`
`sp-60`	`scroll-padding: 15rem;`
`sp-61`	`scroll-padding: 15.25rem;`
`sp-62`	`scroll-padding: 15.5rem;`
`sp-63`	`scroll-padding: 15.75rem;`
`sp-64`	`scroll-padding: 16rem;`
`sp-65`	`scroll-padding: 16.25rem;`
`sp-66`	`scroll-padding: 16.5rem;`
`sp-67`	`scroll-padding: 16.75rem;`
`sp-68`	`scroll-padding: 17rem;`
`sp-69`	`scroll-padding: 17.25rem;`
`sp-70`	`scroll-padding: 17.5rem;`
`sp-71`	`scroll-padding: 17.75rem;`
`sp-72`	`scroll-padding: 18rem;`
`sp-73`	`scroll-padding: 18.25rem;`
`sp-74`	`scroll-padding: 18.5rem;`
`sp-75`	`scroll-padding: 18.75rem;`
`sp-76`	`scroll-padding: 19rem;`
`sp-77`	`scroll-padding: 19.25rem;`
`sp-78`	`scroll-padding: 19.5rem;`
`sp-79`	`scroll-padding: 19.75rem;`
`sp-80`	`scroll-padding: 20rem;`
`sp-81`	`scroll-padding: 20.25rem;`
`sp-82`	`scroll-padding: 20.5rem;`
`sp-83`	`scroll-padding: 20.75rem;`
`sp-84`	`scroll-padding: 21rem;`
`sp-85`	`scroll-padding: 21.25rem;`
`sp-86`	`scroll-padding: 21.5rem;`
`sp-87`	`scroll-padding: 21.75rem;`
`sp-88`	`scroll-padding: 22rem;`
`sp-89`	`scroll-padding: 22.25rem;`
`sp-90`	`scroll-padding: 22.5rem;`
`sp-91`	`scroll-padding: 22.75rem;`
`sp-92`	`scroll-padding: 23rem;`
`sp-93`	`scroll-padding: 23.25rem;`
`sp-94`	`scroll-padding: 23.5rem;`
`sp-95`	`scroll-padding: 23.75rem;`
`sp-96`	`scroll-padding: 24rem;`
`sp-97`	`scroll-padding: 24.25rem;`
`sp-98`	`scroll-padding: 24.5rem;`
`sp-99`	`scroll-padding: 24.75rem;`
`sp-100`	`scroll-padding: 25rem;`

The element will have a uniform padding of 1.5rem around it when scrolling, ensuring that the content is positioned away from the edges of the viewport.

Try scrolling through the image container to see how it behaves.

WIP

<div class="o-h p-r">
  <div class="d-f g-6 o-x-s p-6 sst-x-m">
    <div class="fs-0 p-6 p-r sp-6 ssa-s">
      <div class="i-0 p-a w-full zi-0">
        <div class="d-full" id="area"></div>
      </div>
      <img class="h-40 p-r rad-1 w-80 zi-10" src="/img/coast.jpg" />
    </div>
    <div class="fs-0 p-6 p-r sp-6 ssa-s">
      <div class="i-0 p-a w-full zi-0">
        <div class="d-full" id="area"></div>
      </div>
      <img class="h-40 p-r rad-1 w-80 zi-10" src="/img/coast.jpg" />
    </div>
    <div class="fs-0 p-6 p-r sp-6 ssa-s">
      <div class="i-0 p-a w-full zi-0">
        <div class="d-full" id="area"></div>
      </div>
      <img class="h-40 p-r rad-1 w-80 zi-10" src="/img/coast.jpg" />
    </div>
    <div class="fs-0 p-6 p-r sp-6 ssa-s">
      <div class="i-0 p-a w-full zi-0">
        <div class="d-full" id="area"></div>
      </div>
      <img class="h-40 p-r rad-1 w-80 zi-10" src="/img/coast.jpg" />
    </div>
  </div>
</div>

Scroll Padding Bottom

Sets the padding on the bottom side of an element, creating space between the element and its scrollable container.

Class	Style
`spb-0`	`scroll-padding-bottom: 0rem;`
`spb-1`	`scroll-padding-bottom: 0.25rem;`
`spb-2`	`scroll-padding-bottom: 0.5rem;`
`spb-3`	`scroll-padding-bottom: 0.75rem;`
`spb-4`	`scroll-padding-bottom: 1rem;`
`spb-5`	`scroll-padding-bottom: 1.25rem;`
`spb-6`	`scroll-padding-bottom: 1.5rem;`
`spb-7`	`scroll-padding-bottom: 1.75rem;`
`spb-8`	`scroll-padding-bottom: 2rem;`
`spb-9`	`scroll-padding-bottom: 2.25rem;`
`spb-10`	`scroll-padding-bottom: 2.5rem;`
`spb-11`	`scroll-padding-bottom: 2.75rem;`
`spb-12`	`scroll-padding-bottom: 3rem;`
`spb-13`	`scroll-padding-bottom: 3.25rem;`
`spb-14`	`scroll-padding-bottom: 3.5rem;`
`spb-15`	`scroll-padding-bottom: 3.75rem;`
`spb-16`	`scroll-padding-bottom: 4rem;`
`spb-17`	`scroll-padding-bottom: 4.25rem;`
`spb-18`	`scroll-padding-bottom: 4.5rem;`
`spb-19`	`scroll-padding-bottom: 4.75rem;`
`spb-20`	`scroll-padding-bottom: 5rem;`
`spb-21`	`scroll-padding-bottom: 5.25rem;`
`spb-22`	`scroll-padding-bottom: 5.5rem;`
`spb-23`	`scroll-padding-bottom: 5.75rem;`
`spb-24`	`scroll-padding-bottom: 6rem;`
`spb-25`	`scroll-padding-bottom: 6.25rem;`
`spb-26`	`scroll-padding-bottom: 6.5rem;`
`spb-27`	`scroll-padding-bottom: 6.75rem;`
`spb-28`	`scroll-padding-bottom: 7rem;`
`spb-29`	`scroll-padding-bottom: 7.25rem;`
`spb-30`	`scroll-padding-bottom: 7.5rem;`
`spb-31`	`scroll-padding-bottom: 7.75rem;`
`spb-32`	`scroll-padding-bottom: 8rem;`
`spb-33`	`scroll-padding-bottom: 8.25rem;`
`spb-34`	`scroll-padding-bottom: 8.5rem;`
`spb-35`	`scroll-padding-bottom: 8.75rem;`
`spb-36`	`scroll-padding-bottom: 9rem;`
`spb-37`	`scroll-padding-bottom: 9.25rem;`
`spb-38`	`scroll-padding-bottom: 9.5rem;`
`spb-39`	`scroll-padding-bottom: 9.75rem;`
`spb-40`	`scroll-padding-bottom: 10rem;`
`spb-41`	`scroll-padding-bottom: 10.25rem;`
`spb-42`	`scroll-padding-bottom: 10.5rem;`
`spb-43`	`scroll-padding-bottom: 10.75rem;`
`spb-44`	`scroll-padding-bottom: 11rem;`
`spb-45`	`scroll-padding-bottom: 11.25rem;`
`spb-46`	`scroll-padding-bottom: 11.5rem;`
`spb-47`	`scroll-padding-bottom: 11.75rem;`
`spb-48`	`scroll-padding-bottom: 12rem;`
`spb-49`	`scroll-padding-bottom: 12.25rem;`
`spb-50`	`scroll-padding-bottom: 12.5rem;`
`spb-51`	`scroll-padding-bottom: 12.75rem;`
`spb-52`	`scroll-padding-bottom: 13rem;`
`spb-53`	`scroll-padding-bottom: 13.25rem;`
`spb-54`	`scroll-padding-bottom: 13.5rem;`
`spb-55`	`scroll-padding-bottom: 13.75rem;`
`spb-56`	`scroll-padding-bottom: 14rem;`
`spb-57`	`scroll-padding-bottom: 14.25rem;`
`spb-58`	`scroll-padding-bottom: 14.5rem;`
`spb-59`	`scroll-padding-bottom: 14.75rem;`
`spb-60`	`scroll-padding-bottom: 15rem;`
`spb-61`	`scroll-padding-bottom: 15.25rem;`
`spb-62`	`scroll-padding-bottom: 15.5rem;`
`spb-63`	`scroll-padding-bottom: 15.75rem;`
`spb-64`	`scroll-padding-bottom: 16rem;`
`spb-65`	`scroll-padding-bottom: 16.25rem;`
`spb-66`	`scroll-padding-bottom: 16.5rem;`
`spb-67`	`scroll-padding-bottom: 16.75rem;`
`spb-68`	`scroll-padding-bottom: 17rem;`
`spb-69`	`scroll-padding-bottom: 17.25rem;`
`spb-70`	`scroll-padding-bottom: 17.5rem;`
`spb-71`	`scroll-padding-bottom: 17.75rem;`
`spb-72`	`scroll-padding-bottom: 18rem;`
`spb-73`	`scroll-padding-bottom: 18.25rem;`
`spb-74`	`scroll-padding-bottom: 18.5rem;`
`spb-75`	`scroll-padding-bottom: 18.75rem;`
`spb-76`	`scroll-padding-bottom: 19rem;`
`spb-77`	`scroll-padding-bottom: 19.25rem;`
`spb-78`	`scroll-padding-bottom: 19.5rem;`
`spb-79`	`scroll-padding-bottom: 19.75rem;`
`spb-80`	`scroll-padding-bottom: 20rem;`
`spb-81`	`scroll-padding-bottom: 20.25rem;`
`spb-82`	`scroll-padding-bottom: 20.5rem;`
`spb-83`	`scroll-padding-bottom: 20.75rem;`
`spb-84`	`scroll-padding-bottom: 21rem;`
`spb-85`	`scroll-padding-bottom: 21.25rem;`
`spb-86`	`scroll-padding-bottom: 21.5rem;`
`spb-87`	`scroll-padding-bottom: 21.75rem;`
`spb-88`	`scroll-padding-bottom: 22rem;`
`spb-89`	`scroll-padding-bottom: 22.25rem;`
`spb-90`	`scroll-padding-bottom: 22.5rem;`
`spb-91`	`scroll-padding-bottom: 22.75rem;`
`spb-92`	`scroll-padding-bottom: 23rem;`
`spb-93`	`scroll-padding-bottom: 23.25rem;`
`spb-94`	`scroll-padding-bottom: 23.5rem;`
`spb-95`	`scroll-padding-bottom: 23.75rem;`
`spb-96`	`scroll-padding-bottom: 24rem;`
`spb-97`	`scroll-padding-bottom: 24.25rem;`
`spb-98`	`scroll-padding-bottom: 24.5rem;`
`spb-99`	`scroll-padding-bottom: 24.75rem;`
`spb-100`	`scroll-padding-bottom: 25rem;`

The element will have a padding of 1.5rem below it when scrolling, ensuring that the content is positioned away from the bottom edge of the viewport.

Try scrolling through the image container to see how it behaves.

WIP

<div class="o-h p-r w-fc">
  <div class="d-f fd-c g-6 h-96 o-y-auto p-6 sst-y-m">
    <div class="fs-0 p-r pb-6 spb-6 ssa-s">
      <img class="h-40 rad-1 w-80" src="/img/coast.jpg" />
      <div class="h-6 l-0 l-0 p-a r-0" id="area"></div>
    </div>
    <div class="fs-0 p-r pb-6 spb-6 ssa-s">
      <img class="h-40 rad-1 w-80" src="/img/coast.jpg" />
      <div class="h-6 l-0 l-0 p-a r-0" id="area"></div>
    </div>
    <div class="fs-0 p-r pb-6 spb-6 ssa-s">
      <img class="h-40 rad-1 w-80" src="/img/coast.jpg" />
      <div class="h-6 l-0 l-0 p-a r-0" id="area"></div>
    </div>
    <div class="fs-0 p-r pb-6 spb-6 ssa-s">
      <img class="h-40 rad-1 w-80" src="/img/coast.jpg" />
      <div class="h-6 l-0 l-0 p-a r-0" id="area"></div>
    </div>
  </div>
</div>

Scroll Padding Left

Sets the padding on the left side of an element, creating space between the element and its scrollable container.

Class	Style
`spl-0`	`scroll-padding-left: 0rem;`
`spl-1`	`scroll-padding-left: 0.25rem;`
`spl-2`	`scroll-padding-left: 0.5rem;`
`spl-3`	`scroll-padding-left: 0.75rem;`
`spl-4`	`scroll-padding-left: 1rem;`
`spl-5`	`scroll-padding-left: 1.25rem;`
`spl-6`	`scroll-padding-left: 1.5rem;`
`spl-7`	`scroll-padding-left: 1.75rem;`
`spl-8`	`scroll-padding-left: 2rem;`
`spl-9`	`scroll-padding-left: 2.25rem;`
`spl-10`	`scroll-padding-left: 2.5rem;`
`spl-11`	`scroll-padding-left: 2.75rem;`
`spl-12`	`scroll-padding-left: 3rem;`
`spl-13`	`scroll-padding-left: 3.25rem;`
`spl-14`	`scroll-padding-left: 3.5rem;`
`spl-15`	`scroll-padding-left: 3.75rem;`
`spl-16`	`scroll-padding-left: 4rem;`
`spl-17`	`scroll-padding-left: 4.25rem;`
`spl-18`	`scroll-padding-left: 4.5rem;`
`spl-19`	`scroll-padding-left: 4.75rem;`
`spl-20`	`scroll-padding-left: 5rem;`
`spl-21`	`scroll-padding-left: 5.25rem;`
`spl-22`	`scroll-padding-left: 5.5rem;`
`spl-23`	`scroll-padding-left: 5.75rem;`
`spl-24`	`scroll-padding-left: 6rem;`
`spl-25`	`scroll-padding-left: 6.25rem;`
`spl-26`	`scroll-padding-left: 6.5rem;`
`spl-27`	`scroll-padding-left: 6.75rem;`
`spl-28`	`scroll-padding-left: 7rem;`
`spl-29`	`scroll-padding-left: 7.25rem;`
`spl-30`	`scroll-padding-left: 7.5rem;`
`spl-31`	`scroll-padding-left: 7.75rem;`
`spl-32`	`scroll-padding-left: 8rem;`
`spl-33`	`scroll-padding-left: 8.25rem;`
`spl-34`	`scroll-padding-left: 8.5rem;`
`spl-35`	`scroll-padding-left: 8.75rem;`
`spl-36`	`scroll-padding-left: 9rem;`
`spl-37`	`scroll-padding-left: 9.25rem;`
`spl-38`	`scroll-padding-left: 9.5rem;`
`spl-39`	`scroll-padding-left: 9.75rem;`
`spl-40`	`scroll-padding-left: 10rem;`
`spl-41`	`scroll-padding-left: 10.25rem;`
`spl-42`	`scroll-padding-left: 10.5rem;`
`spl-43`	`scroll-padding-left: 10.75rem;`
`spl-44`	`scroll-padding-left: 11rem;`
`spl-45`	`scroll-padding-left: 11.25rem;`
`spl-46`	`scroll-padding-left: 11.5rem;`
`spl-47`	`scroll-padding-left: 11.75rem;`
`spl-48`	`scroll-padding-left: 12rem;`
`spl-49`	`scroll-padding-left: 12.25rem;`
`spl-50`	`scroll-padding-left: 12.5rem;`
`spl-51`	`scroll-padding-left: 12.75rem;`
`spl-52`	`scroll-padding-left: 13rem;`
`spl-53`	`scroll-padding-left: 13.25rem;`
`spl-54`	`scroll-padding-left: 13.5rem;`
`spl-55`	`scroll-padding-left: 13.75rem;`
`spl-56`	`scroll-padding-left: 14rem;`
`spl-57`	`scroll-padding-left: 14.25rem;`
`spl-58`	`scroll-padding-left: 14.5rem;`
`spl-59`	`scroll-padding-left: 14.75rem;`
`spl-60`	`scroll-padding-left: 15rem;`
`spl-61`	`scroll-padding-left: 15.25rem;`
`spl-62`	`scroll-padding-left: 15.5rem;`
`spl-63`	`scroll-padding-left: 15.75rem;`
`spl-64`	`scroll-padding-left: 16rem;`
`spl-65`	`scroll-padding-left: 16.25rem;`
`spl-66`	`scroll-padding-left: 16.5rem;`
`spl-67`	`scroll-padding-left: 16.75rem;`
`spl-68`	`scroll-padding-left: 17rem;`
`spl-69`	`scroll-padding-left: 17.25rem;`
`spl-70`	`scroll-padding-left: 17.5rem;`
`spl-71`	`scroll-padding-left: 17.75rem;`
`spl-72`	`scroll-padding-left: 18rem;`
`spl-73`	`scroll-padding-left: 18.25rem;`
`spl-74`	`scroll-padding-left: 18.5rem;`
`spl-75`	`scroll-padding-left: 18.75rem;`
`spl-76`	`scroll-padding-left: 19rem;`
`spl-77`	`scroll-padding-left: 19.25rem;`
`spl-78`	`scroll-padding-left: 19.5rem;`
`spl-79`	`scroll-padding-left: 19.75rem;`
`spl-80`	`scroll-padding-left: 20rem;`
`spl-81`	`scroll-padding-left: 20.25rem;`
`spl-82`	`scroll-padding-left: 20.5rem;`
`spl-83`	`scroll-padding-left: 20.75rem;`
`spl-84`	`scroll-padding-left: 21rem;`
`spl-85`	`scroll-padding-left: 21.25rem;`
`spl-86`	`scroll-padding-left: 21.5rem;`
`spl-87`	`scroll-padding-left: 21.75rem;`
`spl-88`	`scroll-padding-left: 22rem;`
`spl-89`	`scroll-padding-left: 22.25rem;`
`spl-90`	`scroll-padding-left: 22.5rem;`
`spl-91`	`scroll-padding-left: 22.75rem;`
`spl-92`	`scroll-padding-left: 23rem;`
`spl-93`	`scroll-padding-left: 23.25rem;`
`spl-94`	`scroll-padding-left: 23.5rem;`
`spl-95`	`scroll-padding-left: 23.75rem;`
`spl-96`	`scroll-padding-left: 24rem;`
`spl-97`	`scroll-padding-left: 24.25rem;`
`spl-98`	`scroll-padding-left: 24.5rem;`
`spl-99`	`scroll-padding-left: 24.75rem;`
`spl-100`	`scroll-padding-left: 25rem;`

The element will have a padding of 1.5rem to its left when scrolling, ensuring that the content is positioned away from the left edge of the viewport.

Try scrolling through the image container to see how it behaves.

WIP

<div class="o-h p-r">
  <div class="d-f g-6 o-x-s p-6 sst-x-m">
    <div class="fs-0 p-r pl-6 spl-6 ssa-s">
      <div class="bo-0 l-0 p-a  id="area"t-0 w-6"></div>
      <img class="h-40 rad-1 w-80" src="/img/coast.jpg" />
    </div>
    <div class="fs-0 p-r pl-6 spl-6 ssa-s">
      <div class="bo-0 l-0 p-a  id="area"t-0 w-6"></div>
      <img class="h-40 rad-1 w-80" src="/img/coast.jpg" />
    </div>
    <div class="fs-0 p-r pl-6 spl-6 ssa-s">
      <div class="bo-0 l-0 p-a  id="area"t-0 w-6"></div>
      <img class="h-40 rad-1 w-80" src="/img/coast.jpg" />
    </div>
    <div class="fs-0 p-r pl-6 spl-6 ssa-s">
      <div class="bo-0 l-0 p-a  id="area"t-0 w-6"></div>
      <img class="h-40 rad-1 w-80" src="/img/coast.jpg" />
    </div>
  </div>
</div>

Scroll Padding Right

Sets the padding on the right side of an element, creating space between the element and its scrollable container.

Class	Style
`spr-0`	`scroll-padding-right: 0rem;`
`spr-1`	`scroll-padding-right: 0.25rem;`
`spr-2`	`scroll-padding-right: 0.5rem;`
`spr-3`	`scroll-padding-right: 0.75rem;`
`spr-4`	`scroll-padding-right: 1rem;`
`spr-5`	`scroll-padding-right: 1.25rem;`
`spr-6`	`scroll-padding-right: 1.5rem;`
`spr-7`	`scroll-padding-right: 1.75rem;`
`spr-8`	`scroll-padding-right: 2rem;`
`spr-9`	`scroll-padding-right: 2.25rem;`
`spr-10`	`scroll-padding-right: 2.5rem;`
`spr-11`	`scroll-padding-right: 2.75rem;`
`spr-12`	`scroll-padding-right: 3rem;`
`spr-13`	`scroll-padding-right: 3.25rem;`
`spr-14`	`scroll-padding-right: 3.5rem;`
`spr-15`	`scroll-padding-right: 3.75rem;`
`spr-16`	`scroll-padding-right: 4rem;`
`spr-17`	`scroll-padding-right: 4.25rem;`
`spr-18`	`scroll-padding-right: 4.5rem;`
`spr-19`	`scroll-padding-right: 4.75rem;`
`spr-20`	`scroll-padding-right: 5rem;`
`spr-21`	`scroll-padding-right: 5.25rem;`
`spr-22`	`scroll-padding-right: 5.5rem;`
`spr-23`	`scroll-padding-right: 5.75rem;`
`spr-24`	`scroll-padding-right: 6rem;`
`spr-25`	`scroll-padding-right: 6.25rem;`
`spr-26`	`scroll-padding-right: 6.5rem;`
`spr-27`	`scroll-padding-right: 6.75rem;`
`spr-28`	`scroll-padding-right: 7rem;`
`spr-29`	`scroll-padding-right: 7.25rem;`
`spr-30`	`scroll-padding-right: 7.5rem;`
`spr-31`	`scroll-padding-right: 7.75rem;`
`spr-32`	`scroll-padding-right: 8rem;`
`spr-33`	`scroll-padding-right: 8.25rem;`
`spr-34`	`scroll-padding-right: 8.5rem;`
`spr-35`	`scroll-padding-right: 8.75rem;`
`spr-36`	`scroll-padding-right: 9rem;`
`spr-37`	`scroll-padding-right: 9.25rem;`
`spr-38`	`scroll-padding-right: 9.5rem;`
`spr-39`	`scroll-padding-right: 9.75rem;`
`spr-40`	`scroll-padding-right: 10rem;`
`spr-41`	`scroll-padding-right: 10.25rem;`
`spr-42`	`scroll-padding-right: 10.5rem;`
`spr-43`	`scroll-padding-right: 10.75rem;`
`spr-44`	`scroll-padding-right: 11rem;`
`spr-45`	`scroll-padding-right: 11.25rem;`
`spr-46`	`scroll-padding-right: 11.5rem;`
`spr-47`	`scroll-padding-right: 11.75rem;`
`spr-48`	`scroll-padding-right: 12rem;`
`spr-49`	`scroll-padding-right: 12.25rem;`
`spr-50`	`scroll-padding-right: 12.5rem;`
`spr-51`	`scroll-padding-right: 12.75rem;`
`spr-52`	`scroll-padding-right: 13rem;`
`spr-53`	`scroll-padding-right: 13.25rem;`
`spr-54`	`scroll-padding-right: 13.5rem;`
`spr-55`	`scroll-padding-right: 13.75rem;`
`spr-56`	`scroll-padding-right: 14rem;`
`spr-57`	`scroll-padding-right: 14.25rem;`
`spr-58`	`scroll-padding-right: 14.5rem;`
`spr-59`	`scroll-padding-right: 14.75rem;`
`spr-60`	`scroll-padding-right: 15rem;`
`spr-61`	`scroll-padding-right: 15.25rem;`
`spr-62`	`scroll-padding-right: 15.5rem;`
`spr-63`	`scroll-padding-right: 15.75rem;`
`spr-64`	`scroll-padding-right: 16rem;`
`spr-65`	`scroll-padding-right: 16.25rem;`
`spr-66`	`scroll-padding-right: 16.5rem;`
`spr-67`	`scroll-padding-right: 16.75rem;`
`spr-68`	`scroll-padding-right: 17rem;`
`spr-69`	`scroll-padding-right: 17.25rem;`
`spr-70`	`scroll-padding-right: 17.5rem;`
`spr-71`	`scroll-padding-right: 17.75rem;`
`spr-72`	`scroll-padding-right: 18rem;`
`spr-73`	`scroll-padding-right: 18.25rem;`
`spr-74`	`scroll-padding-right: 18.5rem;`
`spr-75`	`scroll-padding-right: 18.75rem;`
`spr-76`	`scroll-padding-right: 19rem;`
`spr-77`	`scroll-padding-right: 19.25rem;`
`spr-78`	`scroll-padding-right: 19.5rem;`
`spr-79`	`scroll-padding-right: 19.75rem;`
`spr-80`	`scroll-padding-right: 20rem;`
`spr-81`	`scroll-padding-right: 20.25rem;`
`spr-82`	`scroll-padding-right: 20.5rem;`
`spr-83`	`scroll-padding-right: 20.75rem;`
`spr-84`	`scroll-padding-right: 21rem;`
`spr-85`	`scroll-padding-right: 21.25rem;`
`spr-86`	`scroll-padding-right: 21.5rem;`
`spr-87`	`scroll-padding-right: 21.75rem;`
`spr-88`	`scroll-padding-right: 22rem;`
`spr-89`	`scroll-padding-right: 22.25rem;`
`spr-90`	`scroll-padding-right: 22.5rem;`
`spr-91`	`scroll-padding-right: 22.75rem;`
`spr-92`	`scroll-padding-right: 23rem;`
`spr-93`	`scroll-padding-right: 23.25rem;`
`spr-94`	`scroll-padding-right: 23.5rem;`
`spr-95`	`scroll-padding-right: 23.75rem;`
`spr-96`	`scroll-padding-right: 24rem;`
`spr-97`	`scroll-padding-right: 24.25rem;`
`spr-98`	`scroll-padding-right: 24.5rem;`
`spr-99`	`scroll-padding-right: 24.75rem;`
`spr-100`	`scroll-padding-right: 25rem;`

The element will have a padding of 1.5rem to its right when scrolling, ensuring that the content is positioned away from the right edge of the viewport.

Try scrolling through the image container to see how it behaves.

WIP

<div class="o-h p-r">
  <div class="d-f g-6 o-x-s p-6 sst-x-m">
    <div class="fs-0 p-r pr-6 spr-6 ssa-s">
      <div class="bo-0 p-a r-0  id="area"t-0 w-6"></div>
      <img class="h-40 rad-1 w-80" src="/img/coast.jpg" />
    </div>
    <div class="fs-0 p-r pr-6 spr-6 ssa-s">
      <div class="bo-0 p-a r-0  id="area"t-0 w-6"></div>
      <img class="h-40 rad-1 w-80" src="/img/coast.jpg" />
    </div>
    <div class="fs-0 p-r pr-6 spr-6 ssa-s">
      <div class="bo-0 p-a r-0  id="area"t-0 w-6"></div>
      <img class="h-40 rad-1 w-80" src="/img/coast.jpg" />
    </div>
    <div class="fs-0 p-r pr-6 spr-6 ssa-s">
      <div class="bo-0 p-a r-0  id="area"t-0 w-6"></div>
      <img class="h-40 rad-1 w-80" src="/img/coast.jpg" />
    </div>
  </div>
</div>

Scroll Padding Top

Sets the padding on the top side of an element, creating space between the element and its scrollable container.

Class	Style
`spt-0`	`scroll-padding-top: 0rem;`
`spt-1`	`scroll-padding-top: 0.25rem;`
`spt-2`	`scroll-padding-top: 0.5rem;`
`spt-3`	`scroll-padding-top: 0.75rem;`
`spt-4`	`scroll-padding-top: 1rem;`
`spt-5`	`scroll-padding-top: 1.25rem;`
`spt-6`	`scroll-padding-top: 1.5rem;`
`spt-7`	`scroll-padding-top: 1.75rem;`
`spt-8`	`scroll-padding-top: 2rem;`
`spt-9`	`scroll-padding-top: 2.25rem;`
`spt-10`	`scroll-padding-top: 2.5rem;`
`spt-11`	`scroll-padding-top: 2.75rem;`
`spt-12`	`scroll-padding-top: 3rem;`
`spt-13`	`scroll-padding-top: 3.25rem;`
`spt-14`	`scroll-padding-top: 3.5rem;`
`spt-15`	`scroll-padding-top: 3.75rem;`
`spt-16`	`scroll-padding-top: 4rem;`
`spt-17`	`scroll-padding-top: 4.25rem;`
`spt-18`	`scroll-padding-top: 4.5rem;`
`spt-19`	`scroll-padding-top: 4.75rem;`
`spt-20`	`scroll-padding-top: 5rem;`
`spt-21`	`scroll-padding-top: 5.25rem;`
`spt-22`	`scroll-padding-top: 5.5rem;`
`spt-23`	`scroll-padding-top: 5.75rem;`
`spt-24`	`scroll-padding-top: 6rem;`
`spt-25`	`scroll-padding-top: 6.25rem;`
`spt-26`	`scroll-padding-top: 6.5rem;`
`spt-27`	`scroll-padding-top: 6.75rem;`
`spt-28`	`scroll-padding-top: 7rem;`
`spt-29`	`scroll-padding-top: 7.25rem;`
`spt-30`	`scroll-padding-top: 7.5rem;`
`spt-31`	`scroll-padding-top: 7.75rem;`
`spt-32`	`scroll-padding-top: 8rem;`
`spt-33`	`scroll-padding-top: 8.25rem;`
`spt-34`	`scroll-padding-top: 8.5rem;`
`spt-35`	`scroll-padding-top: 8.75rem;`
`spt-36`	`scroll-padding-top: 9rem;`
`spt-37`	`scroll-padding-top: 9.25rem;`
`spt-38`	`scroll-padding-top: 9.5rem;`
`spt-39`	`scroll-padding-top: 9.75rem;`
`spt-40`	`scroll-padding-top: 10rem;`
`spt-41`	`scroll-padding-top: 10.25rem;`
`spt-42`	`scroll-padding-top: 10.5rem;`
`spt-43`	`scroll-padding-top: 10.75rem;`
`spt-44`	`scroll-padding-top: 11rem;`
`spt-45`	`scroll-padding-top: 11.25rem;`
`spt-46`	`scroll-padding-top: 11.5rem;`
`spt-47`	`scroll-padding-top: 11.75rem;`
`spt-48`	`scroll-padding-top: 12rem;`
`spt-49`	`scroll-padding-top: 12.25rem;`
`spt-50`	`scroll-padding-top: 12.5rem;`
`spt-51`	`scroll-padding-top: 12.75rem;`
`spt-52`	`scroll-padding-top: 13rem;`
`spt-53`	`scroll-padding-top: 13.25rem;`
`spt-54`	`scroll-padding-top: 13.5rem;`
`spt-55`	`scroll-padding-top: 13.75rem;`
`spt-56`	`scroll-padding-top: 14rem;`
`spt-57`	`scroll-padding-top: 14.25rem;`
`spt-58`	`scroll-padding-top: 14.5rem;`
`spt-59`	`scroll-padding-top: 14.75rem;`
`spt-60`	`scroll-padding-top: 15rem;`
`spt-61`	`scroll-padding-top: 15.25rem;`
`spt-62`	`scroll-padding-top: 15.5rem;`
`spt-63`	`scroll-padding-top: 15.75rem;`
`spt-64`	`scroll-padding-top: 16rem;`
`spt-65`	`scroll-padding-top: 16.25rem;`
`spt-66`	`scroll-padding-top: 16.5rem;`
`spt-67`	`scroll-padding-top: 16.75rem;`
`spt-68`	`scroll-padding-top: 17rem;`
`spt-69`	`scroll-padding-top: 17.25rem;`
`spt-70`	`scroll-padding-top: 17.5rem;`
`spt-71`	`scroll-padding-top: 17.75rem;`
`spt-72`	`scroll-padding-top: 18rem;`
`spt-73`	`scroll-padding-top: 18.25rem;`
`spt-74`	`scroll-padding-top: 18.5rem;`
`spt-75`	`scroll-padding-top: 18.75rem;`
`spt-76`	`scroll-padding-top: 19rem;`
`spt-77`	`scroll-padding-top: 19.25rem;`
`spt-78`	`scroll-padding-top: 19.5rem;`
`spt-79`	`scroll-padding-top: 19.75rem;`
`spt-80`	`scroll-padding-top: 20rem;`
`spt-81`	`scroll-padding-top: 20.25rem;`
`spt-82`	`scroll-padding-top: 20.5rem;`
`spt-83`	`scroll-padding-top: 20.75rem;`
`spt-84`	`scroll-padding-top: 21rem;`
`spt-85`	`scroll-padding-top: 21.25rem;`
`spt-86`	`scroll-padding-top: 21.5rem;`
`spt-87`	`scroll-padding-top: 21.75rem;`
`spt-88`	`scroll-padding-top: 22rem;`
`spt-89`	`scroll-padding-top: 22.25rem;`
`spt-90`	`scroll-padding-top: 22.5rem;`
`spt-91`	`scroll-padding-top: 22.75rem;`
`spt-92`	`scroll-padding-top: 23rem;`
`spt-93`	`scroll-padding-top: 23.25rem;`
`spt-94`	`scroll-padding-top: 23.5rem;`
`spt-95`	`scroll-padding-top: 23.75rem;`
`spt-96`	`scroll-padding-top: 24rem;`
`spt-97`	`scroll-padding-top: 24.25rem;`
`spt-98`	`scroll-padding-top: 24.5rem;`
`spt-99`	`scroll-padding-top: 24.75rem;`
`spt-100`	`scroll-padding-top: 25rem;`

The element will have a padding of 1.5rem above it when scrolling, ensuring that the content is positioned away from the top edge of the viewport.

Try scrolling through the image container to see how it behaves.

WIP

<div class="o-h p-r w-fc">
  <div class="d-f fd-c g-6 h-96 o-y-auto p-6 sst-y-m">
    <div class="fs-0 p-r pt-6 spt-6 ssa-s">
      <div class="h-6 l-0 p-a r-0  id="area"t-0"></div>
      <img class="h-40 rad-1 w-80" src="/img/coast.jpg" />
    </div>
    <div class="fs-0 p-r pt-6 spt-6 ssa-s">
      <div class="h-6 l-0 p-a r-0  id="area"t-0"></div>
      <img class="h-40 rad-1 w-80" src="/img/coast.jpg" />
    </div>
    <div class="fs-0 p-r pt-6 spt-6 ssa-s">
      <div class="h-6 l-0 p-a r-0  id="area"t-0"></div>
      <img class="h-40 rad-1 w-80" src="/img/coast.jpg" />
    </div>
    <div class="fs-0 p-r pt-6 spt-6 ssa-s">
      <div class="h-6 l-0 p-a r-0  id="area"t-0"></div>
      <img class="h-40 rad-1 w-80" src="/img/coast.jpg" />
    </div>
  </div>
</div>

Using utility variants

Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.

Using media queries

You can combine responsive breakpoints like sm:sp-*, md:sp-*, lg:sp-*, and xxl:sp-* to allow targeting specific utilities in different viewports.

Using hover states

Alternatively, you can apply :hover by using h:sp-* utility to override elements and change their values when hovering over them.