Margin
Controls the margin of an element.
Widely available
This feature is well established and works across many devices and browser versions.
Chrome
Edge
Firefox
Safari
| Class | Style |
|---|---|
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; |
m-px | margin: 1px; |
8
<div class="d-f fd-r"> <div class="ai-c bg-indigo d-f d-16 jc-c m-8 tc-white">8</div></div>Margin Top
Controls the margin to the top of an element.
Widely available
This feature is well established and works across many devices and browser versions.
Chrome
Edge
Firefox
Safari
| Class | Style |
|---|---|
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; |
mt-px | margin-top: 1px; |
8
<div class="d-f fd-r"> <div class="ai-c bg-indigo d-f d-16 jc-c mt-8 t-8 tc-white">8</div></div>Margin Right
Controls the margin to the right of an element.
Widely available
This feature is well established and works across many devices and browser versions.
Chrome
Edge
Firefox
Safari
| Class | Style |
|---|---|
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; |
mr-px | margin-right: 1px; |
8
<div> <div class="ai-c bg-indigo d-f d-16 jc-c mr-8 tc-white">8</div></div>Margin Bottom
Controls the margin to the bottom of an element.
Widely available
This feature is well established and works across many devices and browser versions.
Chrome
Edge
Firefox
Safari
| Class | Style |
|---|---|
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; |
mb-px | margin-bottom: 1px; |
8
<div class="d-f fd-r"> <div class="ai-c bg-indigo d-f d-16 jc-c mb-8 t-8 tc-white">8</div></div>Margin Left
Controls the margin to the left of an element.
Widely available
This feature is well established and works across many devices and browser versions.
Chrome
Edge
Firefox
Safari
| Class | Style |
|---|---|
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; |
ml-px | margin-left: 1px; |
8
<div> <div class="ai-c bg-indigo d-f d-16 jc-c ml-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.
Widely available
This feature is well established and works across many devices and browser versions.
Chrome
Edge
Firefox
Safari
| Class | Style |
|---|---|
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; |
mbe-px | margin-block-end: 1px; |
8
<div class="d-f fd-r"> <div class="ai-c bg-indigo d-f d-16 jc-c mbe-8 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.
Widely available
This feature is well established and works across many devices and browser versions.
Chrome
Edge
Firefox
Safari
| Class | Style |
|---|---|
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; |
mbs-px | margin-block-start: 1px; |
8
<div class="d-f fd-r"> <div class="ai-c bg-indigo d-f d-16 jc-c mbs-8 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.
Widely available
This feature is well established and works across many devices and browser versions.
Chrome
Edge
Firefox
Safari
| Class | Style |
|---|---|
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; |
mie-px | margin-inline-end: 1px; |
8
<div> <div class="ai-c bg-indigo d-f d-16 jc-c mie-8 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.
Widely available
This feature is well established and works across many devices and browser versions.
Chrome
Edge
Firefox
Safari
| Class | Style |
|---|---|
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; |
mis-px | margin-inline-start: 1px; |
8
<div> <div class="ai-c bg-indigo d-f d-16 jc-c mis-8 tc-white">8</div></div>Margin X
Controls the left and right margins of an element at once.
| Class | Style |
|---|---|
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; |
mx-px | margin-left: 1px; |
8
<div> <div class="ai-c bg-indigo d-f d-16 jc-c mx-8 tc-white">8</div></div>Margin Y
Controls the bottom and top margins of an element at once.
| Class | Style |
|---|---|
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; |
my-px | margin-top: 1px; |
8
<div class="d-f fd-r"> <div class="ai-c bg-indigo d-f d-16 jc-c my-8 tc-white">8</div></div>Using utility variants
Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.
Targeting different viewports
You can combine responsive breakpoints like sm:m-*, md:m-*, lg:m-*, and xxl:m-* to allow targeting specific utilities in different viewports.
Targeting hover states
Alternatively, you can apply :hover by using h:m-* utility to override elements and change their values when hovering over them.