mb-* — space below an element. This family contains 71 generated classes in Nakshora 3.1.
Classes#
| Class | Generated CSS |
|---|---|
mb-0 | margin-bottom: 0px; |
-mb-0 | margin-bottom: -0px; |
mb-1 | margin-bottom: 0.25rem; |
-mb-1 | margin-bottom: -0.25rem; |
mb-2 | margin-bottom: 0.5rem; |
-mb-2 | margin-bottom: -0.5rem; |
mb-3 | margin-bottom: 0.75rem; |
-mb-3 | margin-bottom: -0.75rem; |
mb-4 | margin-bottom: 1rem; |
-mb-4 | margin-bottom: -1rem; |
mb-5 | margin-bottom: 1.25rem; |
-mb-5 | margin-bottom: -1.25rem; |
mb-6 | margin-bottom: 1.5rem; |
-mb-6 | margin-bottom: -1.5rem; |
mb-7 | margin-bottom: 1.75rem; |
-mb-7 | margin-bottom: -1.75rem; |
mb-8 | margin-bottom: 2rem; |
-mb-8 | margin-bottom: -2rem; |
mb-9 | margin-bottom: 2.25rem; |
-mb-9 | margin-bottom: -2.25rem; |
mb-10 | margin-bottom: 2.5rem; |
-mb-10 | margin-bottom: -2.5rem; |
mb-11 | margin-bottom: 2.75rem; |
-mb-11 | margin-bottom: -2.75rem; |
mb-12 | margin-bottom: 3rem; |
-mb-12 | margin-bottom: -3rem; |
mb-14 | margin-bottom: 3.5rem; |
-mb-14 | margin-bottom: -3.5rem; |
mb-16 | margin-bottom: 4rem; |
-mb-16 | margin-bottom: -4rem; |
mb-20 | margin-bottom: 5rem; |
-mb-20 | margin-bottom: -5rem; |
mb-24 | margin-bottom: 6rem; |
-mb-24 | margin-bottom: -6rem; |
mb-28 | margin-bottom: 7rem; |
-mb-28 | margin-bottom: -7rem; |
mb-32 | margin-bottom: 8rem; |
-mb-32 | margin-bottom: -8rem; |
mb-36 | margin-bottom: 9rem; |
-mb-36 | margin-bottom: -9rem; |
mb-40 | margin-bottom: 10rem; |
-mb-40 | margin-bottom: -10rem; |
mb-44 | margin-bottom: 11rem; |
-mb-44 | margin-bottom: -11rem; |
mb-48 | margin-bottom: 12rem; |
-mb-48 | margin-bottom: -12rem; |
mb-52 | margin-bottom: 13rem; |
-mb-52 | margin-bottom: -13rem; |
mb-56 | margin-bottom: 14rem; |
-mb-56 | margin-bottom: -14rem; |
mb-60 | margin-bottom: 15rem; |
-mb-60 | margin-bottom: -15rem; |
mb-64 | margin-bottom: 16rem; |
-mb-64 | margin-bottom: -16rem; |
mb-72 | margin-bottom: 18rem; |
-mb-72 | margin-bottom: -18rem; |
mb-80 | margin-bottom: 20rem; |
-mb-80 | margin-bottom: -20rem; |
mb-96 | margin-bottom: 24rem; |
-mb-96 | margin-bottom: -24rem; |
…and 11 more in this family — search by class name to find the exact one.
Example#
example
<h2 class="mb-4 text-2xl font-bold">Heading rhythm</h2>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#
- Headings: mb-2…mb-4 depending on size
Related#
utilities/spacing/spacing-scale|Spacing scale · utilities/sizing/width|Width · comparisons/margin-vs-padding|Margin vs padding