Margin on all sides: m-* including negatives (-m-*) and auto. This family contains 70 generated classes in Nakshora 3.0.
Classes#
| Class | Generated CSS |
|---|---|
m-0 | margin: 0px; |
-m-0 | margin: -0px; |
m-1 | margin: 0.25rem; |
-m-1 | margin: -0.25rem; |
m-2 | margin: 0.5rem; |
-m-2 | margin: -0.5rem; |
m-3 | margin: 0.75rem; |
-m-3 | margin: -0.75rem; |
m-4 | margin: 1rem; |
-m-4 | margin: -1rem; |
m-5 | margin: 1.25rem; |
-m-5 | margin: -1.25rem; |
m-6 | margin: 1.5rem; |
-m-6 | margin: -1.5rem; |
m-7 | margin: 1.75rem; |
-m-7 | margin: -1.75rem; |
m-8 | margin: 2rem; |
-m-8 | margin: -2rem; |
m-9 | margin: 2.25rem; |
-m-9 | margin: -2.25rem; |
m-10 | margin: 2.5rem; |
-m-10 | margin: -2.5rem; |
m-11 | margin: 2.75rem; |
-m-11 | margin: -2.75rem; |
m-12 | margin: 3rem; |
-m-12 | margin: -3rem; |
m-14 | margin: 3.5rem; |
-m-14 | margin: -3.5rem; |
m-16 | margin: 4rem; |
-m-16 | margin: -4rem; |
m-20 | margin: 5rem; |
-m-20 | margin: -5rem; |
m-24 | margin: 6rem; |
-m-24 | margin: -6rem; |
m-28 | margin: 7rem; |
-m-28 | margin: -7rem; |
m-32 | margin: 8rem; |
-m-32 | margin: -8rem; |
m-36 | margin: 9rem; |
-m-36 | margin: -9rem; |
m-40 | margin: 10rem; |
-m-40 | margin: -10rem; |
m-44 | margin: 11rem; |
-m-44 | margin: -11rem; |
m-48 | margin: 12rem; |
-m-48 | margin: -12rem; |
m-52 | margin: 13rem; |
-m-52 | margin: -13rem; |
m-56 | margin: 14rem; |
-m-56 | margin: -14rem; |
m-60 | margin: 15rem; |
-m-60 | margin: -15rem; |
m-64 | margin: 16rem; |
-m-64 | margin: -16rem; |
m-72 | margin: 18rem; |
-m-72 | margin: -18rem; |
m-80 | margin: 20rem; |
-m-80 | margin: -20rem; |
m-96 | margin: 24rem; |
-m-96 | margin: -24rem; |
…and 10 more in this family — search by class name to find the exact one.
Example#
example
<div class="mx-auto max-w-3xl m-4">Centered with margin</div>Responsive & variants#
Every class here accepts screen prefixes (sm: … xl:) 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#
mx-autocenters block elements with a max-width- Margin collapsing: vertical margins merge — padding never does
Common mistakes#
- Double vertical spacing from collapsed margins — check before adding
Related#
utilities/spacing/spacing-scale|Spacing scale · utilities/sizing/width|Width · comparisons/margin-vs-padding|Margin vs padding