Every spacing utility has a negative twin (-m-4, -mt-2…) for overlaps and optical corrections. This family contains 315 generated classes in Nakshora 3.1.
Classes#
| Class | Generated CSS |
|---|---|
-m-0 | margin: -0px; |
-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-14 | margin: -3.5rem; |
-m-16 | margin: -4rem; |
-m-20 | margin: -5rem; |
-m-24 | margin: -6rem; |
-m-28 | margin: -7rem; |
-m-32 | margin: -8rem; |
-m-36 | margin: -9rem; |
-m-40 | margin: -10rem; |
-m-44 | margin: -11rem; |
-m-48 | margin: -12rem; |
-m-52 | margin: -13rem; |
-m-56 | margin: -14rem; |
-m-60 | margin: -15rem; |
-m-64 | margin: -16rem; |
-m-72 | margin: -18rem; |
-m-80 | margin: -20rem; |
-m-96 | margin: -24rem; |
-m-px | margin: -1px; |
-m-0.5 | margin: -0.125rem; |
-m-1.5 | margin: -0.375rem; |
-m-2.5 | margin: -0.625rem; |
-m-3.5 | margin: -0.875rem; |
-mx-0 | margin-left: -0px; margin-right: -0px; |
-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-14 | margin-left: -3.5rem; margin-right: -3.5rem; |
-mx-16 | margin-left: -4rem; margin-right: -4rem; |
-mx-20 | margin-left: -5rem; margin-right: -5rem; |
-mx-24 | margin-left: -6rem; margin-right: -6rem; |
-mx-28 | margin-left: -7rem; margin-right: -7rem; |
-mx-32 | margin-left: -8rem; margin-right: -8rem; |
-mx-36 | margin-left: -9rem; margin-right: -9rem; |
-mx-40 | margin-left: -10rem; margin-right: -10rem; |
-mx-44 | margin-left: -11rem; margin-right: -11rem; |
-mx-48 | margin-left: -12rem; margin-right: -12rem; |
-mx-52 | margin-left: -13rem; margin-right: -13rem; |
-mx-56 | margin-left: -14rem; margin-right: -14rem; |
…and 255 more in this family — search by class name to find the exact one.
Example#
example
<div class="grid grid-cols-2 gap-4">
<div class="-mt-8">Overlaps the row above</div>
</div>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#
- Negative margins + z-index build stacked card effects
- Optical alignment: nudge icons -mt-px
Common mistakes#
- Negative margins leak outside parents — contain with overflow or padding
Related#
utilities/spacing/spacing-scale|Spacing scale · utilities/sizing/width|Width · comparisons/margin-vs-padding|Margin vs padding