Skip to content
Yumma CSS Logo Yumma CSS Logo Yumma CSS
Blog
Yumma CSS v3.1.0 is now live! 🎉

Scroll Padding

Controls all of the scroll paddings of an element simultaneously.

Utility Properties

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;

This example sets the scroll padding to 1.5rem. 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. 
<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="https://picsum.photos/400/200?image=849" />
    </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="https://picsum.photos/400/200?image=866" />
    </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="https://picsum.photos/400/200?image=872" />
    </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="https://picsum.photos/400/200?image=875" />
    </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.

Utility Properties

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;

This example sets the scroll padding bottom to 1.5rem. 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. 
<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="https://picsum.photos/400/200?image=849" />
      <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="https://picsum.photos/400/200?image=866" />
      <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="https://picsum.photos/400/200?image=872" />
      <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="https://picsum.photos/400/200?image=875" />
      <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.

Utility Properties

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;

This example sets the scroll padding left to 1.5rem. 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. 
<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="https://picsum.photos/400/200?image=849" />
    </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="https://picsum.photos/400/200?image=866" />
    </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="https://picsum.photos/400/200?image=872" />
    </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="https://picsum.photos/400/200?image=875" />
    </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.

Utility Properties

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;

This example sets the scroll padding right to 1.5rem. 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. 
<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="https://picsum.photos/400/200?image=849" />
    </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="https://picsum.photos/400/200?image=866" />
    </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="https://picsum.photos/400/200?image=872" />
    </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="https://picsum.photos/400/200?image=875" />
    </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.

Utility Properties

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;

This example sets the scroll padding top to 1.5rem. 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. 
<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="https://picsum.photos/400/200?image=849" />
    </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="https://picsum.photos/400/200?image=866" />
    </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="https://picsum.photos/400/200?image=872" />
    </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="https://picsum.photos/400/200?image=875" />
    </div>
  </div>
</div>

Conditional styles

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

Breakpoint variant

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

<div class="sp-1 md:sp-2 ..."></div>

Hover variant

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

<div class="sp-1 h:sp-2 ..."></div>