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