Spacing
Controls the spacing of child elements.
Spacing X
Controls the left and right X-axis margins of child elements.
| Class | Properties |
|---|---|
| s-x-0 | margin-left: 0rem;
margin-right: 0rem; |
| s-x-1 | margin-left: 0.25rem;
margin-right: 0.25rem; |
| s-x-2 | margin-left: 0.5rem;
margin-right: 0.5rem; |
| s-x-3 | margin-left: 0.75rem;
margin-right: 0.75rem; |
| s-x-4 | margin-left: 1rem;
margin-right: 1rem; |
| s-x-5 | margin-left: 1.25rem;
margin-right: 1.25rem; |
| s-x-6 | margin-left: 1.5rem;
margin-right: 1.5rem; |
| s-x-7 | margin-left: 1.75rem;
margin-right: 1.75rem; |
| s-x-8 | margin-left: 2rem;
margin-right: 2rem; |
| s-x-9 | margin-left: 2.25rem;
margin-right: 2.25rem; |
| s-x-10 | margin-left: 2.5rem;
margin-right: 2.5rem; |
| s-x-11 | margin-left: 2.75rem;
margin-right: 2.75rem; |
| s-x-12 | margin-left: 3rem;
margin-right: 3rem; |
| s-x-13 | margin-left: 3.25rem;
margin-right: 3.25rem; |
| s-x-14 | margin-left: 3.5rem;
margin-right: 3.5rem; |
| s-x-15 | margin-left: 3.75rem;
margin-right: 3.75rem; |
| s-x-16 | margin-left: 4rem;
margin-right: 4rem; |
| s-x-17 | margin-left: 4.25rem;
margin-right: 4.25rem; |
| s-x-18 | margin-left: 4.5rem;
margin-right: 4.5rem; |
| s-x-19 | margin-left: 4.75rem;
margin-right: 4.75rem; |
| s-x-20 | margin-left: 5rem;
margin-right: 5rem; |
| s-x-21 | margin-left: 5.25rem;
margin-right: 5.25rem; |
| s-x-22 | margin-left: 5.5rem;
margin-right: 5.5rem; |
| s-x-23 | margin-left: 5.75rem;
margin-right: 5.75rem; |
| s-x-24 | margin-left: 6rem;
margin-right: 6rem; |
| s-x-25 | margin-left: 6.25rem;
margin-right: 6.25rem; |
| s-x-26 | margin-left: 6.5rem;
margin-right: 6.5rem; |
| s-x-27 | margin-left: 6.75rem;
margin-right: 6.75rem; |
| s-x-28 | margin-left: 7rem;
margin-right: 7rem; |
| s-x-29 | margin-left: 7.25rem;
margin-right: 7.25rem; |
| s-x-30 | margin-left: 7.5rem;
margin-right: 7.5rem; |
| s-x-31 | margin-left: 7.75rem;
margin-right: 7.75rem; |
| s-x-32 | margin-left: 8rem;
margin-right: 8rem; |
| s-x-33 | margin-left: 8.25rem;
margin-right: 8.25rem; |
| s-x-34 | margin-left: 8.5rem;
margin-right: 8.5rem; |
| s-x-35 | margin-left: 8.75rem;
margin-right: 8.75rem; |
| s-x-36 | margin-left: 9rem;
margin-right: 9rem; |
| s-x-37 | margin-left: 9.25rem;
margin-right: 9.25rem; |
| s-x-38 | margin-left: 9.5rem;
margin-right: 9.5rem; |
| s-x-39 | margin-left: 9.75rem;
margin-right: 9.75rem; |
| s-x-40 | margin-left: 10rem;
margin-right: 10rem; |
| s-x-41 | margin-left: 10.25rem;
margin-right: 10.25rem; |
| s-x-42 | margin-left: 10.5rem;
margin-right: 10.5rem; |
| s-x-43 | margin-left: 10.75rem;
margin-right: 10.75rem; |
| s-x-44 | margin-left: 11rem;
margin-right: 11rem; |
| s-x-45 | margin-left: 11.25rem;
margin-right: 11.25rem; |
| s-x-46 | margin-left: 11.5rem;
margin-right: 11.5rem; |
| s-x-47 | margin-left: 11.75rem;
margin-right: 11.75rem; |
| s-x-48 | margin-left: 12rem;
margin-right: 12rem; |
| s-x-49 | margin-left: 12.25rem;
margin-right: 12.25rem; |
| s-x-50 | margin-left: 12.5rem;
margin-right: 12.5rem; |
| s-x-51 | margin-left: 12.75rem;
margin-right: 12.75rem; |
| s-x-52 | margin-left: 13rem;
margin-right: 13rem; |
| s-x-53 | margin-left: 13.25rem;
margin-right: 13.25rem; |
| s-x-54 | margin-left: 13.5rem;
margin-right: 13.5rem; |
| s-x-55 | margin-left: 13.75rem;
margin-right: 13.75rem; |
| s-x-56 | margin-left: 14rem;
margin-right: 14rem; |
| s-x-57 | margin-left: 14.25rem;
margin-right: 14.25rem; |
| s-x-58 | margin-left: 14.5rem;
margin-right: 14.5rem; |
| s-x-59 | margin-left: 14.75rem;
margin-right: 14.75rem; |
| s-x-60 | margin-left: 15rem;
margin-right: 15rem; |
| s-x-61 | margin-left: 15.25rem;
margin-right: 15.25rem; |
| s-x-62 | margin-left: 15.5rem;
margin-right: 15.5rem; |
| s-x-63 | margin-left: 15.75rem;
margin-right: 15.75rem; |
| s-x-64 | margin-left: 16rem;
margin-right: 16rem; |
| s-x-65 | margin-left: 16.25rem;
margin-right: 16.25rem; |
| s-x-66 | margin-left: 16.5rem;
margin-right: 16.5rem; |
| s-x-67 | margin-left: 16.75rem;
margin-right: 16.75rem; |
| s-x-68 | margin-left: 17rem;
margin-right: 17rem; |
| s-x-69 | margin-left: 17.25rem;
margin-right: 17.25rem; |
| s-x-70 | margin-left: 17.5rem;
margin-right: 17.5rem; |
| s-x-71 | margin-left: 17.75rem;
margin-right: 17.75rem; |
| s-x-72 | margin-left: 18rem;
margin-right: 18rem; |
| s-x-73 | margin-left: 18.25rem;
margin-right: 18.25rem; |
| s-x-74 | margin-left: 18.5rem;
margin-right: 18.5rem; |
| s-x-75 | margin-left: 18.75rem;
margin-right: 18.75rem; |
| s-x-76 | margin-left: 19rem;
margin-right: 19rem; |
| s-x-77 | margin-left: 19.25rem;
margin-right: 19.25rem; |
| s-x-78 | margin-left: 19.5rem;
margin-right: 19.5rem; |
| s-x-79 | margin-left: 19.75rem;
margin-right: 19.75rem; |
| s-x-80 | margin-left: 20rem;
margin-right: 20rem; |
| s-x-81 | margin-left: 20.25rem;
margin-right: 20.25rem; |
| s-x-82 | margin-left: 20.5rem;
margin-right: 20.5rem; |
| s-x-83 | margin-left: 20.75rem;
margin-right: 20.75rem; |
| s-x-84 | margin-left: 21rem;
margin-right: 21rem; |
| s-x-85 | margin-left: 21.25rem;
margin-right: 21.25rem; |
| s-x-86 | margin-left: 21.5rem;
margin-right: 21.5rem; |
| s-x-87 | margin-left: 21.75rem;
margin-right: 21.75rem; |
| s-x-88 | margin-left: 22rem;
margin-right: 22rem; |
| s-x-89 | margin-left: 22.25rem;
margin-right: 22.25rem; |
| s-x-90 | margin-left: 22.5rem;
margin-right: 22.5rem; |
| s-x-91 | margin-left: 22.75rem;
margin-right: 22.75rem; |
| s-x-92 | margin-left: 23rem;
margin-right: 23rem; |
| s-x-93 | margin-left: 23.25rem;
margin-right: 23.25rem; |
| s-x-94 | margin-left: 23.5rem;
margin-right: 23.5rem; |
| s-x-95 | margin-left: 23.75rem;
margin-right: 23.75rem; |
| s-x-96 | margin-left: 24rem;
margin-right: 24rem; |
| s-x-97 | margin-left: 24.25rem;
margin-right: 24.25rem; |
| s-x-98 | margin-left: 24.5rem;
margin-right: 24.5rem; |
| s-x-99 | margin-left: 24.75rem;
margin-right: 24.75rem; |
| s-x-100 | margin-left: 25rem;
margin-right: 25rem; |
<div class="area d-if fd-r s-x-8"> <div class="bg-cyan dim-16 fw-700 ins rad-2 tc-white">A</div> <div class="bg-cyan dim-16 fw-700 ins rad-2 tc-white">B</div> <div class="bg-cyan dim-16 fw-700 ins rad-2 tc-white">C</div></div>Spacing Y
Controls the top and bottom Y-axis margins of child elements.
| Class | Properties |
|---|---|
| s-y-0 | margin-top: 0rem;
margin-bottom: 0rem; |
| s-y-1 | margin-top: 0.25rem;
margin-bottom: 0.25rem; |
| s-y-2 | margin-top: 0.5rem;
margin-bottom: 0.5rem; |
| s-y-3 | margin-top: 0.75rem;
margin-bottom: 0.75rem; |
| s-y-4 | margin-top: 1rem;
margin-bottom: 1rem; |
| s-y-5 | margin-top: 1.25rem;
margin-bottom: 1.25rem; |
| s-y-6 | margin-top: 1.5rem;
margin-bottom: 1.5rem; |
| s-y-7 | margin-top: 1.75rem;
margin-bottom: 1.75rem; |
| s-y-8 | margin-top: 2rem;
margin-bottom: 2rem; |
| s-y-9 | margin-top: 2.25rem;
margin-bottom: 2.25rem; |
| s-y-10 | margin-top: 2.5rem;
margin-bottom: 2.5rem; |
| s-y-11 | margin-top: 2.75rem;
margin-bottom: 2.75rem; |
| s-y-12 | margin-top: 3rem;
margin-bottom: 3rem; |
| s-y-13 | margin-top: 3.25rem;
margin-bottom: 3.25rem; |
| s-y-14 | margin-top: 3.5rem;
margin-bottom: 3.5rem; |
| s-y-15 | margin-top: 3.75rem;
margin-bottom: 3.75rem; |
| s-y-16 | margin-top: 4rem;
margin-bottom: 4rem; |
| s-y-17 | margin-top: 4.25rem;
margin-bottom: 4.25rem; |
| s-y-18 | margin-top: 4.5rem;
margin-bottom: 4.5rem; |
| s-y-19 | margin-top: 4.75rem;
margin-bottom: 4.75rem; |
| s-y-20 | margin-top: 5rem;
margin-bottom: 5rem; |
| s-y-21 | margin-top: 5.25rem;
margin-bottom: 5.25rem; |
| s-y-22 | margin-top: 5.5rem;
margin-bottom: 5.5rem; |
| s-y-23 | margin-top: 5.75rem;
margin-bottom: 5.75rem; |
| s-y-24 | margin-top: 6rem;
margin-bottom: 6rem; |
| s-y-25 | margin-top: 6.25rem;
margin-bottom: 6.25rem; |
| s-y-26 | margin-top: 6.5rem;
margin-bottom: 6.5rem; |
| s-y-27 | margin-top: 6.75rem;
margin-bottom: 6.75rem; |
| s-y-28 | margin-top: 7rem;
margin-bottom: 7rem; |
| s-y-29 | margin-top: 7.25rem;
margin-bottom: 7.25rem; |
| s-y-30 | margin-top: 7.5rem;
margin-bottom: 7.5rem; |
| s-y-31 | margin-top: 7.75rem;
margin-bottom: 7.75rem; |
| s-y-32 | margin-top: 8rem;
margin-bottom: 8rem; |
| s-y-33 | margin-top: 8.25rem;
margin-bottom: 8.25rem; |
| s-y-34 | margin-top: 8.5rem;
margin-bottom: 8.5rem; |
| s-y-35 | margin-top: 8.75rem;
margin-bottom: 8.75rem; |
| s-y-36 | margin-top: 9rem;
margin-bottom: 9rem; |
| s-y-37 | margin-top: 9.25rem;
margin-bottom: 9.25rem; |
| s-y-38 | margin-top: 9.5rem;
margin-bottom: 9.5rem; |
| s-y-39 | margin-top: 9.75rem;
margin-bottom: 9.75rem; |
| s-y-40 | margin-top: 10rem;
margin-bottom: 10rem; |
| s-y-41 | margin-top: 10.25rem;
margin-bottom: 10.25rem; |
| s-y-42 | margin-top: 10.5rem;
margin-bottom: 10.5rem; |
| s-y-43 | margin-top: 10.75rem;
margin-bottom: 10.75rem; |
| s-y-44 | margin-top: 11rem;
margin-bottom: 11rem; |
| s-y-45 | margin-top: 11.25rem;
margin-bottom: 11.25rem; |
| s-y-46 | margin-top: 11.5rem;
margin-bottom: 11.5rem; |
| s-y-47 | margin-top: 11.75rem;
margin-bottom: 11.75rem; |
| s-y-48 | margin-top: 12rem;
margin-bottom: 12rem; |
| s-y-49 | margin-top: 12.25rem;
margin-bottom: 12.25rem; |
| s-y-50 | margin-top: 12.5rem;
margin-bottom: 12.5rem; |
| s-y-51 | margin-top: 12.75rem;
margin-bottom: 12.75rem; |
| s-y-52 | margin-top: 13rem;
margin-bottom: 13rem; |
| s-y-53 | margin-top: 13.25rem;
margin-bottom: 13.25rem; |
| s-y-54 | margin-top: 13.5rem;
margin-bottom: 13.5rem; |
| s-y-55 | margin-top: 13.75rem;
margin-bottom: 13.75rem; |
| s-y-56 | margin-top: 14rem;
margin-bottom: 14rem; |
| s-y-57 | margin-top: 14.25rem;
margin-bottom: 14.25rem; |
| s-y-58 | margin-top: 14.5rem;
margin-bottom: 14.5rem; |
| s-y-59 | margin-top: 14.75rem;
margin-bottom: 14.75rem; |
| s-y-60 | margin-top: 15rem;
margin-bottom: 15rem; |
| s-y-61 | margin-top: 15.25rem;
margin-bottom: 15.25rem; |
| s-y-62 | margin-top: 15.5rem;
margin-bottom: 15.5rem; |
| s-y-63 | margin-top: 15.75rem;
margin-bottom: 15.75rem; |
| s-y-64 | margin-top: 16rem;
margin-bottom: 16rem; |
| s-y-65 | margin-top: 16.25rem;
margin-bottom: 16.25rem; |
| s-y-66 | margin-top: 16.5rem;
margin-bottom: 16.5rem; |
| s-y-67 | margin-top: 16.75rem;
margin-bottom: 16.75rem; |
| s-y-68 | margin-top: 17rem;
margin-bottom: 17rem; |
| s-y-69 | margin-top: 17.25rem;
margin-bottom: 17.25rem; |
| s-y-70 | margin-top: 17.5rem;
margin-bottom: 17.5rem; |
| s-y-71 | margin-top: 17.75rem;
margin-bottom: 17.75rem; |
| s-y-72 | margin-top: 18rem;
margin-bottom: 18rem; |
| s-y-73 | margin-top: 18.25rem;
margin-bottom: 18.25rem; |
| s-y-74 | margin-top: 18.5rem;
margin-bottom: 18.5rem; |
| s-y-75 | margin-top: 18.75rem;
margin-bottom: 18.75rem; |
| s-y-76 | margin-top: 19rem;
margin-bottom: 19rem; |
| s-y-77 | margin-top: 19.25rem;
margin-bottom: 19.25rem; |
| s-y-78 | margin-top: 19.5rem;
margin-bottom: 19.5rem; |
| s-y-79 | margin-top: 19.75rem;
margin-bottom: 19.75rem; |
| s-y-80 | margin-top: 20rem;
margin-bottom: 20rem; |
| s-y-81 | margin-top: 20.25rem;
margin-bottom: 20.25rem; |
| s-y-82 | margin-top: 20.5rem;
margin-bottom: 20.5rem; |
| s-y-83 | margin-top: 20.75rem;
margin-bottom: 20.75rem; |
| s-y-84 | margin-top: 21rem;
margin-bottom: 21rem; |
| s-y-85 | margin-top: 21.25rem;
margin-bottom: 21.25rem; |
| s-y-86 | margin-top: 21.5rem;
margin-bottom: 21.5rem; |
| s-y-87 | margin-top: 21.75rem;
margin-bottom: 21.75rem; |
| s-y-88 | margin-top: 22rem;
margin-bottom: 22rem; |
| s-y-89 | margin-top: 22.25rem;
margin-bottom: 22.25rem; |
| s-y-90 | margin-top: 22.5rem;
margin-bottom: 22.5rem; |
| s-y-91 | margin-top: 22.75rem;
margin-bottom: 22.75rem; |
| s-y-92 | margin-top: 23rem;
margin-bottom: 23rem; |
| s-y-93 | margin-top: 23.25rem;
margin-bottom: 23.25rem; |
| s-y-94 | margin-top: 23.5rem;
margin-bottom: 23.5rem; |
| s-y-95 | margin-top: 23.75rem;
margin-bottom: 23.75rem; |
| s-y-96 | margin-top: 24rem;
margin-bottom: 24rem; |
| s-y-97 | margin-top: 24.25rem;
margin-bottom: 24.25rem; |
| s-y-98 | margin-top: 24.5rem;
margin-bottom: 24.5rem; |
| s-y-99 | margin-top: 24.75rem;
margin-bottom: 24.75rem; |
| s-y-100 | margin-top: 25rem;
margin-bottom: 25rem; |
<div class="area d-if fd-c s-y-8"> <div class="bg-cyan dim-16 fw-700 ins rad-2 tc-white">A</div> <div class="bg-cyan dim-16 fw-700 ins rad-2 tc-white">B</div> <div class="bg-cyan dim-16 fw-700 ins rad-2 tc-white">C</div></div>Using breakpoints
Using responsive breakpoints like sm:s-x-*, md:s-x-*, lg:s-x-*, and xxl:s-x-* allows targeting specific utilities in different viewports.
<div class="s-x-1 md:s-x-2 ..."></div>Using variants
Using :hover variants such as h:s-x-* allows you to override elements and change their values when hovering over them.
<div class="s-x-1 h:s-x-2 ..."></div>