Spacing
Spacing according to pixels
| Spacer value | Pixel value |
|---|---|
0 | |
1 | |
1.5 | |
2 | |
2.5 | |
3 | |
3.5 | |
4 | |
4.5 | |
5 | |
5.5 | |
6 | |
Margin
Margin utilities are structured as .m{direction}-{level}. Negative numbers are represented as n1, n2, n3, etc. Choose a direction and spacing level to change the margin applied to the center block below.
-66
.mr-3Padding
Padding utilities are structured the same way: .p{direction}-{level}.
All Spacing Utility Classes
Margin
| All directions | Top | Right | Bottom | Left | X Direction | Y Direction |
|---|---|---|---|---|---|---|
.m-6 | .mt-6 | .mr-6 | .mb-6 | .ml-6 | .mx-6 | .my-6 |
.m-5.5 | .mt-5.5 | .mr-5.5 | .mb-5.5 | .ml-5.5 | .mx-5.5 | .my-5.5 |
.m-5 | .mt-5 | .mr-5 | .mb-5 | .ml-5 | .mx-5 | .my-5 |
.m-4.5 | .mt-4.5 | .mr-4.5 | .mb-4.5 | .ml-4.5 | .mx-4.5 | .my-4.5 |
.m-4 | .mt-4 | .mr-4 | .mb-4 | .ml-4 | .mx-4 | .my-4 |
.m-3.5 | .mt-3.5 | .mr-3.5 | .mb-3.5 | .ml-3.5 | .mx-3.5 | .my-3.5 |
.m-3 | .mt-3 | .mr-3 | .mb-3 | .ml-3 | .mx-3 | .my-3 |
.m-2.5 | .mt-2.5 | .mr-2.5 | .mb-2.5 | .ml-2.5 | .mx-2.5 | .my-2.5 |
.m-2 | .mt-2 | .mr-2 | .mb-2 | .ml-2 | .mx-2 | .my-2 |
.m-1.5 | .mt-1.5 | .mr-1.5 | .mb-1.5 | .ml-1.5 | .mx-1.5 | .my-1.5 |
.m-1 | .mt-1 | .mr-1 | .mb-1 | .ml-1 | .mx-1 | .my-1 |
.m-0 | .mt-0 | .mr-0 | .mb-0 | .ml-0 | .mx-0 | .my-0 |
.m-n1 | .mt-n1 | .mr-n1 | .mb-n1 | .ml-n1 | .mx-n1 | .my-n1 |
.m-n1.5 | .mt-n1.5 | .mr-n1.5 | .mb-n1.5 | .ml-n1.5 | .mx-n1.5 | .my-n1.5 |
.m-n2 | .mt-n2 | .mr-n2 | .mb-n2 | .ml-n2 | .mx-n2 | .my-n2 |
.m-n2.5 | .mt-n2.5 | .mr-n2.5 | .mb-n2.5 | .ml-n2.5 | .mx-n2.5 | .my-n2.5 |
.m-n3 | .mt-n3 | .mr-n3 | .mb-n3 | .ml-n3 | .mx-n3 | .my-n3 |
.m-n3.5 | .mt-n3.5 | .mr-n3.5 | .mb-n3.5 | .ml-n3.5 | .mx-n3.5 | .my-n3.5 |
.m-n4 | .mt-n4 | .mr-n4 | .mb-n4 | .ml-n4 | .mx-n4 | .my-n4 |
.m-n4.5 | .mt-n4.5 | .mr-n4.5 | .mb-n4.5 | .ml-n4.5 | .mx-n4.5 | .my-n4.5 |
.m-n5 | .mt-n5 | .mr-n5 | .mb-n5 | .ml-n5 | .mx-n5 | .my-n5 |
.m-n5.5 | .mt-n5.5 | .mr-n5.5 | .mb-n5.5 | .ml-n5.5 | .mx-n5.5 | .my-n5.5 |
.m-n6 | .mt-n6 | .mr-n6 | .mb-n6 | .ml-n6 | .mx-n6 | .my-n6 |
Padding
| All directions | Top | Right | Bottom | Left | X Direction | Y Direction |
|---|---|---|---|---|---|---|
.p-6 | .pt-6 | .pr-6 | .pb-6 | .pl-6 | .px-6 | .py-6 |
.p-5.5 | .pt-5.5 | .pr-5.5 | .pb-5.5 | .pl-5.5 | .px-5.5 | .py-5.5 |
.p-5 | .pt-5 | .pr-5 | .pb-5 | .pl-5 | .px-5 | .py-5 |
.p-4.5 | .pt-4.5 | .pr-4.5 | .pb-4.5 | .pl-4.5 | .px-4.5 | .py-4.5 |
.p-4 | .pt-4 | .pr-4 | .pb-4 | .pl-4 | .px-4 | .py-4 |
.p-3.5 | .pt-3.5 | .pr-3.5 | .pb-3.5 | .pl-3.5 | .px-3.5 | .py-3.5 |
.p-3 | .pt-3 | .pr-3 | .pb-3 | .pl-3 | .px-3 | .py-3 |
.p-2.5 | .pt-2.5 | .pr-2.5 | .pb-2.5 | .pl-2.5 | .px-2.5 | .py-2.5 |
.p-2 | .pt-2 | .pr-2 | .pb-2 | .pl-2 | .px-2 | .py-2 |
.p-1.5 | .pt-1.5 | .pr-1.5 | .pb-1.5 | .pl-1.5 | .px-1.5 | .py-1.5 |
.p-1 | .pt-1 | .pr-1 | .pb-1 | .pl-1 | .px-1 | .py-1 |
.p-0 | .pt-0 | .pr-0 | .pb-0 | .pl-0 | .px-0 | .py-0 |
.p-n1 | .pt-n1 | .pr-n1 | .pb-n1 | .pl-n1 | .px-n1 | .py-n1 |
.p-n1.5 | .pt-n1.5 | .pr-n1.5 | .pb-n1.5 | .pl-n1.5 | .px-n1.5 | .py-n1.5 |
.p-n2 | .pt-n2 | .pr-n2 | .pb-n2 | .pl-n2 | .px-n2 | .py-n2 |
.p-n2.5 | .pt-n2.5 | .pr-n2.5 | .pb-n2.5 | .pl-n2.5 | .px-n2.5 | .py-n2.5 |
.p-n3 | .pt-n3 | .pr-n3 | .pb-n3 | .pl-n3 | .px-n3 | .py-n3 |
.p-n3.5 | .pt-n3.5 | .pr-n3.5 | .pb-n3.5 | .pl-n3.5 | .px-n3.5 | .py-n3.5 |
.p-n4 | .pt-n4 | .pr-n4 | .pb-n4 | .pl-n4 | .px-n4 | .py-n4 |
.p-n4.5 | .pt-n4.5 | .pr-n4.5 | .pb-n4.5 | .pl-n4.5 | .px-n4.5 | .py-n4.5 |
.p-n5 | .pt-n5 | .pr-n5 | .pb-n5 | .pl-n5 | .px-n5 | .py-n5 |
.p-n5.5 | .pt-n5.5 | .pr-n5.5 | .pb-n5.5 | .pl-n5.5 | .px-n5.5 | .py-n5.5 |
.p-n6 | .pt-n6 | .pr-n6 | .pb-n6 | .pl-n6 | .px-n6 | .py-n6 |