Scroll Margin

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

This example sets the scroll margin to 1.5rem. The element will have a uniform spacing of 1.5rem around it when scrolling, ensuring that it 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 sm-6 ssa-s">
      <div class="i-0 p-a w-full zi-0">
        <div class="d-full stripes"></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 sm-6 ssa-s">
      <div class="i-0 p-a w-full zi-0">
        <div class="d-full stripes"></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 sm-6 ssa-s">
      <div class="i-0 p-a w-full zi-0">
        <div class="d-full stripes"></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 sm-6 ssa-s">
      <div class="i-0 p-a w-full zi-0">
        <div class="d-full stripes"></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 Margin Bottom

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

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

This example sets the scroll margin bottom to 1.5rem. The element will have a spacing of 1.5rem below it when scrolling, ensuring that it 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 smb-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 stripes"></div>
    </div>
    <div class="fs-0 p-r pb-6 smb-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 stripes"></div>
    </div>
    <div class="fs-0 p-r pb-6 smb-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 stripes"></div>
    </div>
    <div class="fs-0 p-r pb-6 smb-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 stripes"></div>
    </div>
  </div>
</div>

Scroll Margin Left

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

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

This example sets the scroll margin left to 1.5rem. The element will have a spacing of 1.5rem to its left when scrolling, ensuring that it 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 sml-6 ssa-s">
      <div class="bo-0 l-0 p-a stripes 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 sml-6 ssa-s">
      <div class="bo-0 l-0 p-a stripes 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 sml-6 ssa-s">
      <div class="bo-0 l-0 p-a stripes 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 sml-6 ssa-s">
      <div class="bo-0 l-0 p-a stripes 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 Margin Right

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

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

This example sets the scroll margin right to 1.5rem. The element will have a spacing of 1.5rem to its right when scrolling, ensuring that it 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 smr-6 ssa-s">
      <div class="bo-0 p-a r-0 stripes 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 smr-6 ssa-s">
      <div class="bo-0 p-a r-0 stripes 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 smr-6 ssa-s">
      <div class="bo-0 p-a r-0 stripes 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 smr-6 ssa-s">
      <div class="bo-0 p-a r-0 stripes 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 Margin Top

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

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

This example sets the scroll margin top to 1.5rem. The element will have a spacing of 1.5rem above it when scrolling, ensuring that it 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 smt-6 ssa-s">
      <div class="h-6 l-0 p-a r-0 stripes 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 smt-6 ssa-s">
      <div class="h-6 l-0 p-a r-0 stripes 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 smt-6 ssa-s">
      <div class="h-6 l-0 p-a r-0 stripes 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 smt-6 ssa-s">
      <div class="h-6 l-0 p-a r-0 stripes 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.

Media modifiers

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

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

Hover modifiers

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

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