Margin
Controls the margin of an element.
| Utility | 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;
|
This example sets the margin to 2rem. The element will have a uniform margin around it.
<div class="d-f fd-r" id="area"> <div class="ai-c bg-indigo d-f d-16 jc-c m-8 rad-1 tc-white">8</div></div>Margin Bottom
Controls the bottom margin of an element.
| Utility | 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;
|
This example sets the bottom margin to 2rem. The element will have space below it.
<div class="d-f fd-r" id="area"> <div class="ai-c bg-indigo d-f d-16 jc-c mb-8 rad-1 t-8 tc-white">8</div></div>Margin Left
Controls the left margin of an element.
| Utility | 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;
|
This example sets the left margin to 2rem. The element will have space to its left.
<div id="area"> <div class="ai-c bg-indigo d-f d-16 jc-c ml-8 rad-1 tc-white">8</div></div>Margin Right
Controls the right margin of an element.
| Utility | 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;
|
This example sets the right margin to 2rem. The element will have space to its right.
<div id="area"> <div class="ai-c bg-indigo d-f d-16 jc-c mr-8 rad-1 tc-white">8</div></div>Margin Top
Controls the top margin of an element.
| Utility | 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;
|
This example sets the top margin to 2rem. The element will have space above it.
<div class="d-f fd-r" id="area"> <div class="ai-c bg-indigo d-f d-16 jc-c mt-8 rad-1 t-8 tc-white">8</div></div>Margin Block End
Controls the logical block end margin of an element, which maps to a physical margin depending on the element’s writing mode, directionality, and text orientation.
| Utility | Properties |
|---|---|
| mbe-0 | margin-block-end: 0rem;
|
| mbe-1 | margin-block-end: 0.25rem;
|
| mbe-2 | margin-block-end: 0.5rem;
|
| mbe-3 | margin-block-end: 0.75rem;
|
| mbe-4 | margin-block-end: 1rem;
|
| mbe-5 | margin-block-end: 1.25rem;
|
| mbe-6 | margin-block-end: 1.5rem;
|
| mbe-7 | margin-block-end: 1.75rem;
|
| mbe-8 | margin-block-end: 2rem;
|
| mbe-9 | margin-block-end: 2.25rem;
|
| mbe-10 | margin-block-end: 2.5rem;
|
| mbe-11 | margin-block-end: 2.75rem;
|
| mbe-12 | margin-block-end: 3rem;
|
| mbe-13 | margin-block-end: 3.25rem;
|
| mbe-14 | margin-block-end: 3.5rem;
|
| mbe-15 | margin-block-end: 3.75rem;
|
| mbe-16 | margin-block-end: 4rem;
|
| mbe-17 | margin-block-end: 4.25rem;
|
| mbe-18 | margin-block-end: 4.5rem;
|
| mbe-19 | margin-block-end: 4.75rem;
|
| mbe-20 | margin-block-end: 5rem;
|
| mbe-21 | margin-block-end: 5.25rem;
|
| mbe-22 | margin-block-end: 5.5rem;
|
| mbe-23 | margin-block-end: 5.75rem;
|
| mbe-24 | margin-block-end: 6rem;
|
| mbe-25 | margin-block-end: 6.25rem;
|
| mbe-26 | margin-block-end: 6.5rem;
|
| mbe-27 | margin-block-end: 6.75rem;
|
| mbe-28 | margin-block-end: 7rem;
|
| mbe-29 | margin-block-end: 7.25rem;
|
| mbe-30 | margin-block-end: 7.5rem;
|
| mbe-31 | margin-block-end: 7.75rem;
|
| mbe-32 | margin-block-end: 8rem;
|
| mbe-33 | margin-block-end: 8.25rem;
|
| mbe-34 | margin-block-end: 8.5rem;
|
| mbe-35 | margin-block-end: 8.75rem;
|
| mbe-36 | margin-block-end: 9rem;
|
| mbe-37 | margin-block-end: 9.25rem;
|
| mbe-38 | margin-block-end: 9.5rem;
|
| mbe-39 | margin-block-end: 9.75rem;
|
| mbe-40 | margin-block-end: 10rem;
|
| mbe-41 | margin-block-end: 10.25rem;
|
| mbe-42 | margin-block-end: 10.5rem;
|
| mbe-43 | margin-block-end: 10.75rem;
|
| mbe-44 | margin-block-end: 11rem;
|
| mbe-45 | margin-block-end: 11.25rem;
|
| mbe-46 | margin-block-end: 11.5rem;
|
| mbe-47 | margin-block-end: 11.75rem;
|
| mbe-48 | margin-block-end: 12rem;
|
| mbe-49 | margin-block-end: 12.25rem;
|
| mbe-50 | margin-block-end: 12.5rem;
|
| mbe-51 | margin-block-end: 12.75rem;
|
| mbe-52 | margin-block-end: 13rem;
|
| mbe-53 | margin-block-end: 13.25rem;
|
| mbe-54 | margin-block-end: 13.5rem;
|
| mbe-55 | margin-block-end: 13.75rem;
|
| mbe-56 | margin-block-end: 14rem;
|
| mbe-57 | margin-block-end: 14.25rem;
|
| mbe-58 | margin-block-end: 14.5rem;
|
| mbe-59 | margin-block-end: 14.75rem;
|
| mbe-60 | margin-block-end: 15rem;
|
| mbe-61 | margin-block-end: 15.25rem;
|
| mbe-62 | margin-block-end: 15.5rem;
|
| mbe-63 | margin-block-end: 15.75rem;
|
| mbe-64 | margin-block-end: 16rem;
|
| mbe-65 | margin-block-end: 16.25rem;
|
| mbe-66 | margin-block-end: 16.5rem;
|
| mbe-67 | margin-block-end: 16.75rem;
|
| mbe-68 | margin-block-end: 17rem;
|
| mbe-69 | margin-block-end: 17.25rem;
|
| mbe-70 | margin-block-end: 17.5rem;
|
| mbe-71 | margin-block-end: 17.75rem;
|
| mbe-72 | margin-block-end: 18rem;
|
| mbe-73 | margin-block-end: 18.25rem;
|
| mbe-74 | margin-block-end: 18.5rem;
|
| mbe-75 | margin-block-end: 18.75rem;
|
| mbe-76 | margin-block-end: 19rem;
|
| mbe-77 | margin-block-end: 19.25rem;
|
| mbe-78 | margin-block-end: 19.5rem;
|
| mbe-79 | margin-block-end: 19.75rem;
|
| mbe-80 | margin-block-end: 20rem;
|
| mbe-81 | margin-block-end: 20.25rem;
|
| mbe-82 | margin-block-end: 20.5rem;
|
| mbe-83 | margin-block-end: 20.75rem;
|
| mbe-84 | margin-block-end: 21rem;
|
| mbe-85 | margin-block-end: 21.25rem;
|
| mbe-86 | margin-block-end: 21.5rem;
|
| mbe-87 | margin-block-end: 21.75rem;
|
| mbe-88 | margin-block-end: 22rem;
|
| mbe-89 | margin-block-end: 22.25rem;
|
| mbe-90 | margin-block-end: 22.5rem;
|
| mbe-91 | margin-block-end: 22.75rem;
|
| mbe-92 | margin-block-end: 23rem;
|
| mbe-93 | margin-block-end: 23.25rem;
|
| mbe-94 | margin-block-end: 23.5rem;
|
| mbe-95 | margin-block-end: 23.75rem;
|
| mbe-96 | margin-block-end: 24rem;
|
| mbe-97 | margin-block-end: 24.25rem;
|
| mbe-98 | margin-block-end: 24.5rem;
|
| mbe-99 | margin-block-end: 24.75rem;
|
| mbe-100 | margin-block-end: 25rem;
|
| mbe-auto | margin-block-end: auto;
|
This example sets the margin block end to 2rem. The element will have space below it.
<div class="d-f fd-r" id="area"> <div class="ai-c bg-indigo d-f d-16 jc-c mbe-8 rad-1 t-8 tc-white">8</div></div>Margin Block Start
Controls the logical block start margin of an element, which maps to a physical margin depending on the element’s writing mode, directionality, and text orientation.
| Utility | Properties |
|---|---|
| mbs-0 | margin-block-start: 0rem;
|
| mbs-1 | margin-block-start: 0.25rem;
|
| mbs-2 | margin-block-start: 0.5rem;
|
| mbs-3 | margin-block-start: 0.75rem;
|
| mbs-4 | margin-block-start: 1rem;
|
| mbs-5 | margin-block-start: 1.25rem;
|
| mbs-6 | margin-block-start: 1.5rem;
|
| mbs-7 | margin-block-start: 1.75rem;
|
| mbs-8 | margin-block-start: 2rem;
|
| mbs-9 | margin-block-start: 2.25rem;
|
| mbs-10 | margin-block-start: 2.5rem;
|
| mbs-11 | margin-block-start: 2.75rem;
|
| mbs-12 | margin-block-start: 3rem;
|
| mbs-13 | margin-block-start: 3.25rem;
|
| mbs-14 | margin-block-start: 3.5rem;
|
| mbs-15 | margin-block-start: 3.75rem;
|
| mbs-16 | margin-block-start: 4rem;
|
| mbs-17 | margin-block-start: 4.25rem;
|
| mbs-18 | margin-block-start: 4.5rem;
|
| mbs-19 | margin-block-start: 4.75rem;
|
| mbs-20 | margin-block-start: 5rem;
|
| mbs-21 | margin-block-start: 5.25rem;
|
| mbs-22 | margin-block-start: 5.5rem;
|
| mbs-23 | margin-block-start: 5.75rem;
|
| mbs-24 | margin-block-start: 6rem;
|
| mbs-25 | margin-block-start: 6.25rem;
|
| mbs-26 | margin-block-start: 6.5rem;
|
| mbs-27 | margin-block-start: 6.75rem;
|
| mbs-28 | margin-block-start: 7rem;
|
| mbs-29 | margin-block-start: 7.25rem;
|
| mbs-30 | margin-block-start: 7.5rem;
|
| mbs-31 | margin-block-start: 7.75rem;
|
| mbs-32 | margin-block-start: 8rem;
|
| mbs-33 | margin-block-start: 8.25rem;
|
| mbs-34 | margin-block-start: 8.5rem;
|
| mbs-35 | margin-block-start: 8.75rem;
|
| mbs-36 | margin-block-start: 9rem;
|
| mbs-37 | margin-block-start: 9.25rem;
|
| mbs-38 | margin-block-start: 9.5rem;
|
| mbs-39 | margin-block-start: 9.75rem;
|
| mbs-40 | margin-block-start: 10rem;
|
| mbs-41 | margin-block-start: 10.25rem;
|
| mbs-42 | margin-block-start: 10.5rem;
|
| mbs-43 | margin-block-start: 10.75rem;
|
| mbs-44 | margin-block-start: 11rem;
|
| mbs-45 | margin-block-start: 11.25rem;
|
| mbs-46 | margin-block-start: 11.5rem;
|
| mbs-47 | margin-block-start: 11.75rem;
|
| mbs-48 | margin-block-start: 12rem;
|
| mbs-49 | margin-block-start: 12.25rem;
|
| mbs-50 | margin-block-start: 12.5rem;
|
| mbs-51 | margin-block-start: 12.75rem;
|
| mbs-52 | margin-block-start: 13rem;
|
| mbs-53 | margin-block-start: 13.25rem;
|
| mbs-54 | margin-block-start: 13.5rem;
|
| mbs-55 | margin-block-start: 13.75rem;
|
| mbs-56 | margin-block-start: 14rem;
|
| mbs-57 | margin-block-start: 14.25rem;
|
| mbs-58 | margin-block-start: 14.5rem;
|
| mbs-59 | margin-block-start: 14.75rem;
|
| mbs-60 | margin-block-start: 15rem;
|
| mbs-61 | margin-block-start: 15.25rem;
|
| mbs-62 | margin-block-start: 15.5rem;
|
| mbs-63 | margin-block-start: 15.75rem;
|
| mbs-64 | margin-block-start: 16rem;
|
| mbs-65 | margin-block-start: 16.25rem;
|
| mbs-66 | margin-block-start: 16.5rem;
|
| mbs-67 | margin-block-start: 16.75rem;
|
| mbs-68 | margin-block-start: 17rem;
|
| mbs-69 | margin-block-start: 17.25rem;
|
| mbs-70 | margin-block-start: 17.5rem;
|
| mbs-71 | margin-block-start: 17.75rem;
|
| mbs-72 | margin-block-start: 18rem;
|
| mbs-73 | margin-block-start: 18.25rem;
|
| mbs-74 | margin-block-start: 18.5rem;
|
| mbs-75 | margin-block-start: 18.75rem;
|
| mbs-76 | margin-block-start: 19rem;
|
| mbs-77 | margin-block-start: 19.25rem;
|
| mbs-78 | margin-block-start: 19.5rem;
|
| mbs-79 | margin-block-start: 19.75rem;
|
| mbs-80 | margin-block-start: 20rem;
|
| mbs-81 | margin-block-start: 20.25rem;
|
| mbs-82 | margin-block-start: 20.5rem;
|
| mbs-83 | margin-block-start: 20.75rem;
|
| mbs-84 | margin-block-start: 21rem;
|
| mbs-85 | margin-block-start: 21.25rem;
|
| mbs-86 | margin-block-start: 21.5rem;
|
| mbs-87 | margin-block-start: 21.75rem;
|
| mbs-88 | margin-block-start: 22rem;
|
| mbs-89 | margin-block-start: 22.25rem;
|
| mbs-90 | margin-block-start: 22.5rem;
|
| mbs-91 | margin-block-start: 22.75rem;
|
| mbs-92 | margin-block-start: 23rem;
|
| mbs-93 | margin-block-start: 23.25rem;
|
| mbs-94 | margin-block-start: 23.5rem;
|
| mbs-95 | margin-block-start: 23.75rem;
|
| mbs-96 | margin-block-start: 24rem;
|
| mbs-97 | margin-block-start: 24.25rem;
|
| mbs-98 | margin-block-start: 24.5rem;
|
| mbs-99 | margin-block-start: 24.75rem;
|
| mbs-100 | margin-block-start: 25rem;
|
| mbs-auto | margin-block-start: auto;
|
This example sets the margin block start to 2rem. The element will have space above it.
<div class="d-f fd-r" id="area"> <div class="ai-c bg-indigo d-f d-16 jc-c mbs-8 rad-1 t-8 tc-white">8</div></div>Margin Inline End
Controls the logical inline end margin of an element, which maps to a physical margin depending on the element’s writing mode, directionality, and text orientation.
| Utility | Properties |
|---|---|
| mie-0 | margin-inline-end: 0rem;
|
| mie-1 | margin-inline-end: 0.25rem;
|
| mie-2 | margin-inline-end: 0.5rem;
|
| mie-3 | margin-inline-end: 0.75rem;
|
| mie-4 | margin-inline-end: 1rem;
|
| mie-5 | margin-inline-end: 1.25rem;
|
| mie-6 | margin-inline-end: 1.5rem;
|
| mie-7 | margin-inline-end: 1.75rem;
|
| mie-8 | margin-inline-end: 2rem;
|
| mie-9 | margin-inline-end: 2.25rem;
|
| mie-10 | margin-inline-end: 2.5rem;
|
| mie-11 | margin-inline-end: 2.75rem;
|
| mie-12 | margin-inline-end: 3rem;
|
| mie-13 | margin-inline-end: 3.25rem;
|
| mie-14 | margin-inline-end: 3.5rem;
|
| mie-15 | margin-inline-end: 3.75rem;
|
| mie-16 | margin-inline-end: 4rem;
|
| mie-17 | margin-inline-end: 4.25rem;
|
| mie-18 | margin-inline-end: 4.5rem;
|
| mie-19 | margin-inline-end: 4.75rem;
|
| mie-20 | margin-inline-end: 5rem;
|
| mie-21 | margin-inline-end: 5.25rem;
|
| mie-22 | margin-inline-end: 5.5rem;
|
| mie-23 | margin-inline-end: 5.75rem;
|
| mie-24 | margin-inline-end: 6rem;
|
| mie-25 | margin-inline-end: 6.25rem;
|
| mie-26 | margin-inline-end: 6.5rem;
|
| mie-27 | margin-inline-end: 6.75rem;
|
| mie-28 | margin-inline-end: 7rem;
|
| mie-29 | margin-inline-end: 7.25rem;
|
| mie-30 | margin-inline-end: 7.5rem;
|
| mie-31 | margin-inline-end: 7.75rem;
|
| mie-32 | margin-inline-end: 8rem;
|
| mie-33 | margin-inline-end: 8.25rem;
|
| mie-34 | margin-inline-end: 8.5rem;
|
| mie-35 | margin-inline-end: 8.75rem;
|
| mie-36 | margin-inline-end: 9rem;
|
| mie-37 | margin-inline-end: 9.25rem;
|
| mie-38 | margin-inline-end: 9.5rem;
|
| mie-39 | margin-inline-end: 9.75rem;
|
| mie-40 | margin-inline-end: 10rem;
|
| mie-41 | margin-inline-end: 10.25rem;
|
| mie-42 | margin-inline-end: 10.5rem;
|
| mie-43 | margin-inline-end: 10.75rem;
|
| mie-44 | margin-inline-end: 11rem;
|
| mie-45 | margin-inline-end: 11.25rem;
|
| mie-46 | margin-inline-end: 11.5rem;
|
| mie-47 | margin-inline-end: 11.75rem;
|
| mie-48 | margin-inline-end: 12rem;
|
| mie-49 | margin-inline-end: 12.25rem;
|
| mie-50 | margin-inline-end: 12.5rem;
|
| mie-51 | margin-inline-end: 12.75rem;
|
| mie-52 | margin-inline-end: 13rem;
|
| mie-53 | margin-inline-end: 13.25rem;
|
| mie-54 | margin-inline-end: 13.5rem;
|
| mie-55 | margin-inline-end: 13.75rem;
|
| mie-56 | margin-inline-end: 14rem;
|
| mie-57 | margin-inline-end: 14.25rem;
|
| mie-58 | margin-inline-end: 14.5rem;
|
| mie-59 | margin-inline-end: 14.75rem;
|
| mie-60 | margin-inline-end: 15rem;
|
| mie-61 | margin-inline-end: 15.25rem;
|
| mie-62 | margin-inline-end: 15.5rem;
|
| mie-63 | margin-inline-end: 15.75rem;
|
| mie-64 | margin-inline-end: 16rem;
|
| mie-65 | margin-inline-end: 16.25rem;
|
| mie-66 | margin-inline-end: 16.5rem;
|
| mie-67 | margin-inline-end: 16.75rem;
|
| mie-68 | margin-inline-end: 17rem;
|
| mie-69 | margin-inline-end: 17.25rem;
|
| mie-70 | margin-inline-end: 17.5rem;
|
| mie-71 | margin-inline-end: 17.75rem;
|
| mie-72 | margin-inline-end: 18rem;
|
| mie-73 | margin-inline-end: 18.25rem;
|
| mie-74 | margin-inline-end: 18.5rem;
|
| mie-75 | margin-inline-end: 18.75rem;
|
| mie-76 | margin-inline-end: 19rem;
|
| mie-77 | margin-inline-end: 19.25rem;
|
| mie-78 | margin-inline-end: 19.5rem;
|
| mie-79 | margin-inline-end: 19.75rem;
|
| mie-80 | margin-inline-end: 20rem;
|
| mie-81 | margin-inline-end: 20.25rem;
|
| mie-82 | margin-inline-end: 20.5rem;
|
| mie-83 | margin-inline-end: 20.75rem;
|
| mie-84 | margin-inline-end: 21rem;
|
| mie-85 | margin-inline-end: 21.25rem;
|
| mie-86 | margin-inline-end: 21.5rem;
|
| mie-87 | margin-inline-end: 21.75rem;
|
| mie-88 | margin-inline-end: 22rem;
|
| mie-89 | margin-inline-end: 22.25rem;
|
| mie-90 | margin-inline-end: 22.5rem;
|
| mie-91 | margin-inline-end: 22.75rem;
|
| mie-92 | margin-inline-end: 23rem;
|
| mie-93 | margin-inline-end: 23.25rem;
|
| mie-94 | margin-inline-end: 23.5rem;
|
| mie-95 | margin-inline-end: 23.75rem;
|
| mie-96 | margin-inline-end: 24rem;
|
| mie-97 | margin-inline-end: 24.25rem;
|
| mie-98 | margin-inline-end: 24.5rem;
|
| mie-99 | margin-inline-end: 24.75rem;
|
| mie-100 | margin-inline-end: 25rem;
|
| mie-auto | margin-inline-end: auto;
|
This example sets the margin inline end to 2rem. The element will have space to its right.
<div id="area"> <div class="ai-c bg-indigo d-f d-16 jc-c mie-8 rad-1 tc-white">8</div></div>Margin Inline Start
Controls the logical inline start margin of an element, which maps to a physical margin depending on the element’s writing mode, directionality, and text orientation.
| Utility | Properties |
|---|---|
| mis-0 | margin-inline-start: 0rem;
|
| mis-1 | margin-inline-start: 0.25rem;
|
| mis-2 | margin-inline-start: 0.5rem;
|
| mis-3 | margin-inline-start: 0.75rem;
|
| mis-4 | margin-inline-start: 1rem;
|
| mis-5 | margin-inline-start: 1.25rem;
|
| mis-6 | margin-inline-start: 1.5rem;
|
| mis-7 | margin-inline-start: 1.75rem;
|
| mis-8 | margin-inline-start: 2rem;
|
| mis-9 | margin-inline-start: 2.25rem;
|
| mis-10 | margin-inline-start: 2.5rem;
|
| mis-11 | margin-inline-start: 2.75rem;
|
| mis-12 | margin-inline-start: 3rem;
|
| mis-13 | margin-inline-start: 3.25rem;
|
| mis-14 | margin-inline-start: 3.5rem;
|
| mis-15 | margin-inline-start: 3.75rem;
|
| mis-16 | margin-inline-start: 4rem;
|
| mis-17 | margin-inline-start: 4.25rem;
|
| mis-18 | margin-inline-start: 4.5rem;
|
| mis-19 | margin-inline-start: 4.75rem;
|
| mis-20 | margin-inline-start: 5rem;
|
| mis-21 | margin-inline-start: 5.25rem;
|
| mis-22 | margin-inline-start: 5.5rem;
|
| mis-23 | margin-inline-start: 5.75rem;
|
| mis-24 | margin-inline-start: 6rem;
|
| mis-25 | margin-inline-start: 6.25rem;
|
| mis-26 | margin-inline-start: 6.5rem;
|
| mis-27 | margin-inline-start: 6.75rem;
|
| mis-28 | margin-inline-start: 7rem;
|
| mis-29 | margin-inline-start: 7.25rem;
|
| mis-30 | margin-inline-start: 7.5rem;
|
| mis-31 | margin-inline-start: 7.75rem;
|
| mis-32 | margin-inline-start: 8rem;
|
| mis-33 | margin-inline-start: 8.25rem;
|
| mis-34 | margin-inline-start: 8.5rem;
|
| mis-35 | margin-inline-start: 8.75rem;
|
| mis-36 | margin-inline-start: 9rem;
|
| mis-37 | margin-inline-start: 9.25rem;
|
| mis-38 | margin-inline-start: 9.5rem;
|
| mis-39 | margin-inline-start: 9.75rem;
|
| mis-40 | margin-inline-start: 10rem;
|
| mis-41 | margin-inline-start: 10.25rem;
|
| mis-42 | margin-inline-start: 10.5rem;
|
| mis-43 | margin-inline-start: 10.75rem;
|
| mis-44 | margin-inline-start: 11rem;
|
| mis-45 | margin-inline-start: 11.25rem;
|
| mis-46 | margin-inline-start: 11.5rem;
|
| mis-47 | margin-inline-start: 11.75rem;
|
| mis-48 | margin-inline-start: 12rem;
|
| mis-49 | margin-inline-start: 12.25rem;
|
| mis-50 | margin-inline-start: 12.5rem;
|
| mis-51 | margin-inline-start: 12.75rem;
|
| mis-52 | margin-inline-start: 13rem;
|
| mis-53 | margin-inline-start: 13.25rem;
|
| mis-54 | margin-inline-start: 13.5rem;
|
| mis-55 | margin-inline-start: 13.75rem;
|
| mis-56 | margin-inline-start: 14rem;
|
| mis-57 | margin-inline-start: 14.25rem;
|
| mis-58 | margin-inline-start: 14.5rem;
|
| mis-59 | margin-inline-start: 14.75rem;
|
| mis-60 | margin-inline-start: 15rem;
|
| mis-61 | margin-inline-start: 15.25rem;
|
| mis-62 | margin-inline-start: 15.5rem;
|
| mis-63 | margin-inline-start: 15.75rem;
|
| mis-64 | margin-inline-start: 16rem;
|
| mis-65 | margin-inline-start: 16.25rem;
|
| mis-66 | margin-inline-start: 16.5rem;
|
| mis-67 | margin-inline-start: 16.75rem;
|
| mis-68 | margin-inline-start: 17rem;
|
| mis-69 | margin-inline-start: 17.25rem;
|
| mis-70 | margin-inline-start: 17.5rem;
|
| mis-71 | margin-inline-start: 17.75rem;
|
| mis-72 | margin-inline-start: 18rem;
|
| mis-73 | margin-inline-start: 18.25rem;
|
| mis-74 | margin-inline-start: 18.5rem;
|
| mis-75 | margin-inline-start: 18.75rem;
|
| mis-76 | margin-inline-start: 19rem;
|
| mis-77 | margin-inline-start: 19.25rem;
|
| mis-78 | margin-inline-start: 19.5rem;
|
| mis-79 | margin-inline-start: 19.75rem;
|
| mis-80 | margin-inline-start: 20rem;
|
| mis-81 | margin-inline-start: 20.25rem;
|
| mis-82 | margin-inline-start: 20.5rem;
|
| mis-83 | margin-inline-start: 20.75rem;
|
| mis-84 | margin-inline-start: 21rem;
|
| mis-85 | margin-inline-start: 21.25rem;
|
| mis-86 | margin-inline-start: 21.5rem;
|
| mis-87 | margin-inline-start: 21.75rem;
|
| mis-88 | margin-inline-start: 22rem;
|
| mis-89 | margin-inline-start: 22.25rem;
|
| mis-90 | margin-inline-start: 22.5rem;
|
| mis-91 | margin-inline-start: 22.75rem;
|
| mis-92 | margin-inline-start: 23rem;
|
| mis-93 | margin-inline-start: 23.25rem;
|
| mis-94 | margin-inline-start: 23.5rem;
|
| mis-95 | margin-inline-start: 23.75rem;
|
| mis-96 | margin-inline-start: 24rem;
|
| mis-97 | margin-inline-start: 24.25rem;
|
| mis-98 | margin-inline-start: 24.5rem;
|
| mis-99 | margin-inline-start: 24.75rem;
|
| mis-100 | margin-inline-start: 25rem;
|
| mis-auto | margin-inline-start: auto;
|
This example sets the margin inline start to 2rem. The element will have space to its left.
<div id="area"> <div class="ai-c bg-indigo d-f d-16 jc-c mis-8 rad-1 tc-white">8</div></div>Margin X
Controls the left and right margins of an element at once.
| Utility | Properties |
|---|---|
| mx-0 | margin-left: 0rem;
|
| mx-1 | margin-left: 0.25rem;
|
| mx-2 | margin-left: 0.5rem;
|
| mx-3 | margin-left: 0.75rem;
|
| mx-4 | margin-left: 1rem;
|
| mx-5 | margin-left: 1.25rem;
|
| mx-6 | margin-left: 1.5rem;
|
| mx-7 | margin-left: 1.75rem;
|
| mx-8 | margin-left: 2rem;
|
| mx-9 | margin-left: 2.25rem;
|
| mx-10 | margin-left: 2.5rem;
|
| mx-11 | margin-left: 2.75rem;
|
| mx-12 | margin-left: 3rem;
|
| mx-13 | margin-left: 3.25rem;
|
| mx-14 | margin-left: 3.5rem;
|
| mx-15 | margin-left: 3.75rem;
|
| mx-16 | margin-left: 4rem;
|
| mx-17 | margin-left: 4.25rem;
|
| mx-18 | margin-left: 4.5rem;
|
| mx-19 | margin-left: 4.75rem;
|
| mx-20 | margin-left: 5rem;
|
| mx-21 | margin-left: 5.25rem;
|
| mx-22 | margin-left: 5.5rem;
|
| mx-23 | margin-left: 5.75rem;
|
| mx-24 | margin-left: 6rem;
|
| mx-25 | margin-left: 6.25rem;
|
| mx-26 | margin-left: 6.5rem;
|
| mx-27 | margin-left: 6.75rem;
|
| mx-28 | margin-left: 7rem;
|
| mx-29 | margin-left: 7.25rem;
|
| mx-30 | margin-left: 7.5rem;
|
| mx-31 | margin-left: 7.75rem;
|
| mx-32 | margin-left: 8rem;
|
| mx-33 | margin-left: 8.25rem;
|
| mx-34 | margin-left: 8.5rem;
|
| mx-35 | margin-left: 8.75rem;
|
| mx-36 | margin-left: 9rem;
|
| mx-37 | margin-left: 9.25rem;
|
| mx-38 | margin-left: 9.5rem;
|
| mx-39 | margin-left: 9.75rem;
|
| mx-40 | margin-left: 10rem;
|
| mx-41 | margin-left: 10.25rem;
|
| mx-42 | margin-left: 10.5rem;
|
| mx-43 | margin-left: 10.75rem;
|
| mx-44 | margin-left: 11rem;
|
| mx-45 | margin-left: 11.25rem;
|
| mx-46 | margin-left: 11.5rem;
|
| mx-47 | margin-left: 11.75rem;
|
| mx-48 | margin-left: 12rem;
|
| mx-49 | margin-left: 12.25rem;
|
| mx-50 | margin-left: 12.5rem;
|
| mx-51 | margin-left: 12.75rem;
|
| mx-52 | margin-left: 13rem;
|
| mx-53 | margin-left: 13.25rem;
|
| mx-54 | margin-left: 13.5rem;
|
| mx-55 | margin-left: 13.75rem;
|
| mx-56 | margin-left: 14rem;
|
| mx-57 | margin-left: 14.25rem;
|
| mx-58 | margin-left: 14.5rem;
|
| mx-59 | margin-left: 14.75rem;
|
| mx-60 | margin-left: 15rem;
|
| mx-61 | margin-left: 15.25rem;
|
| mx-62 | margin-left: 15.5rem;
|
| mx-63 | margin-left: 15.75rem;
|
| mx-64 | margin-left: 16rem;
|
| mx-65 | margin-left: 16.25rem;
|
| mx-66 | margin-left: 16.5rem;
|
| mx-67 | margin-left: 16.75rem;
|
| mx-68 | margin-left: 17rem;
|
| mx-69 | margin-left: 17.25rem;
|
| mx-70 | margin-left: 17.5rem;
|
| mx-71 | margin-left: 17.75rem;
|
| mx-72 | margin-left: 18rem;
|
| mx-73 | margin-left: 18.25rem;
|
| mx-74 | margin-left: 18.5rem;
|
| mx-75 | margin-left: 18.75rem;
|
| mx-76 | margin-left: 19rem;
|
| mx-77 | margin-left: 19.25rem;
|
| mx-78 | margin-left: 19.5rem;
|
| mx-79 | margin-left: 19.75rem;
|
| mx-80 | margin-left: 20rem;
|
| mx-81 | margin-left: 20.25rem;
|
| mx-82 | margin-left: 20.5rem;
|
| mx-83 | margin-left: 20.75rem;
|
| mx-84 | margin-left: 21rem;
|
| mx-85 | margin-left: 21.25rem;
|
| mx-86 | margin-left: 21.5rem;
|
| mx-87 | margin-left: 21.75rem;
|
| mx-88 | margin-left: 22rem;
|
| mx-89 | margin-left: 22.25rem;
|
| mx-90 | margin-left: 22.5rem;
|
| mx-91 | margin-left: 22.75rem;
|
| mx-92 | margin-left: 23rem;
|
| mx-93 | margin-left: 23.25rem;
|
| mx-94 | margin-left: 23.5rem;
|
| mx-95 | margin-left: 23.75rem;
|
| mx-96 | margin-left: 24rem;
|
| mx-97 | margin-left: 24.25rem;
|
| mx-98 | margin-left: 24.5rem;
|
| mx-99 | margin-left: 24.75rem;
|
| mx-100 | margin-left: 25rem;
|
| mx-auto | margin-left: auto;
|
This example sets the left and right margins to 2rem. The element will have uniform space on both sides.
<div id="area"> <div class="ai-c bg-indigo d-f d-16 jc-c mx-8 rad-1 tc-white">8</div></div>Margin Y
Controls the bottom and top margins of an element at once.
| Utility | Properties |
|---|---|
| my-0 | margin-top: 0rem;
|
| my-1 | margin-top: 0.25rem;
|
| my-2 | margin-top: 0.5rem;
|
| my-3 | margin-top: 0.75rem;
|
| my-4 | margin-top: 1rem;
|
| my-5 | margin-top: 1.25rem;
|
| my-6 | margin-top: 1.5rem;
|
| my-7 | margin-top: 1.75rem;
|
| my-8 | margin-top: 2rem;
|
| my-9 | margin-top: 2.25rem;
|
| my-10 | margin-top: 2.5rem;
|
| my-11 | margin-top: 2.75rem;
|
| my-12 | margin-top: 3rem;
|
| my-13 | margin-top: 3.25rem;
|
| my-14 | margin-top: 3.5rem;
|
| my-15 | margin-top: 3.75rem;
|
| my-16 | margin-top: 4rem;
|
| my-17 | margin-top: 4.25rem;
|
| my-18 | margin-top: 4.5rem;
|
| my-19 | margin-top: 4.75rem;
|
| my-20 | margin-top: 5rem;
|
| my-21 | margin-top: 5.25rem;
|
| my-22 | margin-top: 5.5rem;
|
| my-23 | margin-top: 5.75rem;
|
| my-24 | margin-top: 6rem;
|
| my-25 | margin-top: 6.25rem;
|
| my-26 | margin-top: 6.5rem;
|
| my-27 | margin-top: 6.75rem;
|
| my-28 | margin-top: 7rem;
|
| my-29 | margin-top: 7.25rem;
|
| my-30 | margin-top: 7.5rem;
|
| my-31 | margin-top: 7.75rem;
|
| my-32 | margin-top: 8rem;
|
| my-33 | margin-top: 8.25rem;
|
| my-34 | margin-top: 8.5rem;
|
| my-35 | margin-top: 8.75rem;
|
| my-36 | margin-top: 9rem;
|
| my-37 | margin-top: 9.25rem;
|
| my-38 | margin-top: 9.5rem;
|
| my-39 | margin-top: 9.75rem;
|
| my-40 | margin-top: 10rem;
|
| my-41 | margin-top: 10.25rem;
|
| my-42 | margin-top: 10.5rem;
|
| my-43 | margin-top: 10.75rem;
|
| my-44 | margin-top: 11rem;
|
| my-45 | margin-top: 11.25rem;
|
| my-46 | margin-top: 11.5rem;
|
| my-47 | margin-top: 11.75rem;
|
| my-48 | margin-top: 12rem;
|
| my-49 | margin-top: 12.25rem;
|
| my-50 | margin-top: 12.5rem;
|
| my-51 | margin-top: 12.75rem;
|
| my-52 | margin-top: 13rem;
|
| my-53 | margin-top: 13.25rem;
|
| my-54 | margin-top: 13.5rem;
|
| my-55 | margin-top: 13.75rem;
|
| my-56 | margin-top: 14rem;
|
| my-57 | margin-top: 14.25rem;
|
| my-58 | margin-top: 14.5rem;
|
| my-59 | margin-top: 14.75rem;
|
| my-60 | margin-top: 15rem;
|
| my-61 | margin-top: 15.25rem;
|
| my-62 | margin-top: 15.5rem;
|
| my-63 | margin-top: 15.75rem;
|
| my-64 | margin-top: 16rem;
|
| my-65 | margin-top: 16.25rem;
|
| my-66 | margin-top: 16.5rem;
|
| my-67 | margin-top: 16.75rem;
|
| my-68 | margin-top: 17rem;
|
| my-69 | margin-top: 17.25rem;
|
| my-70 | margin-top: 17.5rem;
|
| my-71 | margin-top: 17.75rem;
|
| my-72 | margin-top: 18rem;
|
| my-73 | margin-top: 18.25rem;
|
| my-74 | margin-top: 18.5rem;
|
| my-75 | margin-top: 18.75rem;
|
| my-76 | margin-top: 19rem;
|
| my-77 | margin-top: 19.25rem;
|
| my-78 | margin-top: 19.5rem;
|
| my-79 | margin-top: 19.75rem;
|
| my-80 | margin-top: 20rem;
|
| my-81 | margin-top: 20.25rem;
|
| my-82 | margin-top: 20.5rem;
|
| my-83 | margin-top: 20.75rem;
|
| my-84 | margin-top: 21rem;
|
| my-85 | margin-top: 21.25rem;
|
| my-86 | margin-top: 21.5rem;
|
| my-87 | margin-top: 21.75rem;
|
| my-88 | margin-top: 22rem;
|
| my-89 | margin-top: 22.25rem;
|
| my-90 | margin-top: 22.5rem;
|
| my-91 | margin-top: 22.75rem;
|
| my-92 | margin-top: 23rem;
|
| my-93 | margin-top: 23.25rem;
|
| my-94 | margin-top: 23.5rem;
|
| my-95 | margin-top: 23.75rem;
|
| my-96 | margin-top: 24rem;
|
| my-97 | margin-top: 24.25rem;
|
| my-98 | margin-top: 24.5rem;
|
| my-99 | margin-top: 24.75rem;
|
| my-100 | margin-top: 25rem;
|
| my-auto | margin-top: auto;
|
This example sets the bottom and top margins to 2rem. The element will have uniform space above and below it.
<div class="d-f fd-r" id="area"> <div class="ai-c bg-indigo d-f d-16 jc-c my-8 rad-1 tc-white">8</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 modifier
You can combine 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>Hover modifier
Alternatively, you can apply :hover by using h:m-* utility to override elements and change their values when hovering over them.
<div class="m-1 h:m-2 ..."></div>