mr-* — space to the right of an element. This family contains 71 generated classes in Nakshora 3.1.
Classes#
| Class | Generated CSS |
|---|---|
mr-0 | margin-right: 0px; |
-mr-0 | margin-right: -0px; |
mr-1 | margin-right: 0.25rem; |
-mr-1 | margin-right: -0.25rem; |
mr-2 | margin-right: 0.5rem; |
-mr-2 | margin-right: -0.5rem; |
mr-3 | margin-right: 0.75rem; |
-mr-3 | margin-right: -0.75rem; |
mr-4 | margin-right: 1rem; |
-mr-4 | margin-right: -1rem; |
mr-5 | margin-right: 1.25rem; |
-mr-5 | margin-right: -1.25rem; |
mr-6 | margin-right: 1.5rem; |
-mr-6 | margin-right: -1.5rem; |
mr-7 | margin-right: 1.75rem; |
-mr-7 | margin-right: -1.75rem; |
mr-8 | margin-right: 2rem; |
-mr-8 | margin-right: -2rem; |
mr-9 | margin-right: 2.25rem; |
-mr-9 | margin-right: -2.25rem; |
mr-10 | margin-right: 2.5rem; |
-mr-10 | margin-right: -2.5rem; |
mr-11 | margin-right: 2.75rem; |
-mr-11 | margin-right: -2.75rem; |
mr-12 | margin-right: 3rem; |
-mr-12 | margin-right: -3rem; |
mr-14 | margin-right: 3.5rem; |
-mr-14 | margin-right: -3.5rem; |
mr-16 | margin-right: 4rem; |
-mr-16 | margin-right: -4rem; |
mr-20 | margin-right: 5rem; |
-mr-20 | margin-right: -5rem; |
mr-24 | margin-right: 6rem; |
-mr-24 | margin-right: -6rem; |
mr-28 | margin-right: 7rem; |
-mr-28 | margin-right: -7rem; |
mr-32 | margin-right: 8rem; |
-mr-32 | margin-right: -8rem; |
mr-36 | margin-right: 9rem; |
-mr-36 | margin-right: -9rem; |
mr-40 | margin-right: 10rem; |
-mr-40 | margin-right: -10rem; |
mr-44 | margin-right: 11rem; |
-mr-44 | margin-right: -11rem; |
mr-48 | margin-right: 12rem; |
-mr-48 | margin-right: -12rem; |
mr-52 | margin-right: 13rem; |
-mr-52 | margin-right: -13rem; |
mr-56 | margin-right: 14rem; |
-mr-56 | margin-right: -14rem; |
mr-60 | margin-right: 15rem; |
-mr-60 | margin-right: -15rem; |
mr-64 | margin-right: 16rem; |
-mr-64 | margin-right: -16rem; |
mr-72 | margin-right: 18rem; |
-mr-72 | margin-right: -18rem; |
mr-80 | margin-right: 20rem; |
-mr-80 | margin-right: -20rem; |
mr-96 | margin-right: 24rem; |
-mr-96 | margin-right: -24rem; |
…and 11 more in this family — search by class name to find the exact one.
Example#
example
<span class="mr-2">→</span> NextResponsive & 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#
- In flex, prefer gap over mr — gap handles both axes
Related#
utilities/spacing/spacing-scale|Spacing scale · utilities/sizing/width|Width · comparisons/margin-vs-padding|Margin vs padding