mt-* — the most-used spacing utility: space above an element. This family contains 71 generated classes in Nakshora 3.1.
Classes#
| Class | Generated CSS |
|---|---|
mt-0 | margin-top: 0px; |
-mt-0 | margin-top: -0px; |
mt-1 | margin-top: 0.25rem; |
-mt-1 | margin-top: -0.25rem; |
mt-2 | margin-top: 0.5rem; |
-mt-2 | margin-top: -0.5rem; |
mt-3 | margin-top: 0.75rem; |
-mt-3 | margin-top: -0.75rem; |
mt-4 | margin-top: 1rem; |
-mt-4 | margin-top: -1rem; |
mt-5 | margin-top: 1.25rem; |
-mt-5 | margin-top: -1.25rem; |
mt-6 | margin-top: 1.5rem; |
-mt-6 | margin-top: -1.5rem; |
mt-7 | margin-top: 1.75rem; |
-mt-7 | margin-top: -1.75rem; |
mt-8 | margin-top: 2rem; |
-mt-8 | margin-top: -2rem; |
mt-9 | margin-top: 2.25rem; |
-mt-9 | margin-top: -2.25rem; |
mt-10 | margin-top: 2.5rem; |
-mt-10 | margin-top: -2.5rem; |
mt-11 | margin-top: 2.75rem; |
-mt-11 | margin-top: -2.75rem; |
mt-12 | margin-top: 3rem; |
-mt-12 | margin-top: -3rem; |
mt-14 | margin-top: 3.5rem; |
-mt-14 | margin-top: -3.5rem; |
mt-16 | margin-top: 4rem; |
-mt-16 | margin-top: -4rem; |
mt-20 | margin-top: 5rem; |
-mt-20 | margin-top: -5rem; |
mt-24 | margin-top: 6rem; |
-mt-24 | margin-top: -6rem; |
mt-28 | margin-top: 7rem; |
-mt-28 | margin-top: -7rem; |
mt-32 | margin-top: 8rem; |
-mt-32 | margin-top: -8rem; |
mt-36 | margin-top: 9rem; |
-mt-36 | margin-top: -9rem; |
mt-40 | margin-top: 10rem; |
-mt-40 | margin-top: -10rem; |
mt-44 | margin-top: 11rem; |
-mt-44 | margin-top: -11rem; |
mt-48 | margin-top: 12rem; |
-mt-48 | margin-top: -12rem; |
mt-52 | margin-top: 13rem; |
-mt-52 | margin-top: -13rem; |
mt-56 | margin-top: 14rem; |
-mt-56 | margin-top: -14rem; |
mt-60 | margin-top: 15rem; |
-mt-60 | margin-top: -15rem; |
mt-64 | margin-top: 16rem; |
-mt-64 | margin-top: -16rem; |
mt-72 | margin-top: 18rem; |
-mt-72 | margin-top: -18rem; |
mt-80 | margin-top: 20rem; |
-mt-80 | margin-top: -20rem; |
mt-96 | margin-top: 24rem; |
-mt-96 | margin-top: -24rem; |
…and 11 more in this family — search by class name to find the exact one.
Example#
example
<button class="mt-6">Continue</button>Responsive & variants#
Every class here accepts screen prefixes (xxs: … 5xl:) and state variants — md:hover:p-4 style stacks compile to a single media query. See responsive/index|Responsive design and variants/index|Variants.
Best practices#
- Flow spacing: give children mt-* rather than parent gaps when order varies
Related#
utilities/spacing/spacing-scale|Spacing scale · utilities/sizing/width|Width · comparisons/margin-vs-padding|Margin vs padding