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.
Direction
-66
.mr-3Padding
Padding utilities are structured the same way: .p{direction}-{level}.
All Spacing Utility Classes
| All directions | Top | Right | Bottom | Left | X Direction | Y Direction |
|---|---|---|---|---|---|---|
| Margin | ||||||
.m-6.m-5.5.m-5.m-4.5.m-4.m-3.5.m-3.m-2.5.m-2.m-1.5.m-1.m-0.m-n1.m-n1.5.m-n2.m-n2.5.m-n3.m-n3.5.m-n4.m-n4.5.m-n5.m-n5.5.m-n6 | .mt-6.mt-5.5.mt-5.mt-4.5.mt-4.mt-3.5.mt-3.mt-2.5.mt-2.mt-1.5.mt-1.mt-0.mt-n1.mt-n1.5.mt-n2.mt-n2.5.mt-n3.mt-n3.5.mt-n4.mt-n4.5.mt-n5.mt-n5.5.mt-n6 | .mr-6.mr-5.5.mr-5.mr-4.5.mr-4.mr-3.5.mr-3.mr-2.5.mr-2.mr-1.5.mr-1.mr-0.mr-n1.mr-n1.5.mr-n2.mr-n2.5.mr-n3.mr-n3.5.mr-n4.mr-n4.5.mr-n5.mr-n5.5.mr-n6 | .mb-6.mb-5.5.mb-5.mb-4.5.mb-4.mb-3.5.mb-3.mb-2.5.mb-2.mb-1.5.mb-1.mb-0.mb-n1.mb-n1.5.mb-n2.mb-n2.5.mb-n3.mb-n3.5.mb-n4.mb-n4.5.mb-n5.mb-n5.5.mb-n6 | .ml-6.ml-5.5.ml-5.ml-4.5.ml-4.ml-3.5.ml-3.ml-2.5.ml-2.ml-1.5.ml-1.ml-0.ml-n1.ml-n1.5.ml-n2.ml-n2.5.ml-n3.ml-n3.5.ml-n4.ml-n4.5.ml-n5.ml-n5.5.ml-n6 | .mx-6.mx-5.5.mx-5.mx-4.5.mx-4.mx-3.5.mx-3.mx-2.5.mx-2.mx-1.5.mx-1.mx-0.mx-n1.mx-n1.5.mx-n2.mx-n2.5.mx-n3.mx-n3.5.mx-n4.mx-n4.5.mx-n5.mx-n5.5.mx-n6 | .my-6.my-5.5.my-5.my-4.5.my-4.my-3.5.my-3.my-2.5.my-2.my-1.5.my-1.my-0.my-n1.my-n1.5.my-n2.my-n2.5.my-n3.my-n3.5.my-n4.my-n4.5.my-n5.my-n5.5.my-n6 |
| Padding | ||||||
.p-6.p-5.5.p-5.p-4.5.p-4.p-3.5.p-3.p-2.5.p-2.p-1.5.p-1.p-0.p-n1.p-n1.5.p-n2.p-n2.5.p-n3.p-n3.5.p-n4.p-n4.5.p-n5.p-n5.5.p-n6 | .pt-6.pt-5.5.pt-5.pt-4.5.pt-4.pt-3.5.pt-3.pt-2.5.pt-2.pt-1.5.pt-1.pt-0.pt-n1.pt-n1.5.pt-n2.pt-n2.5.pt-n3.pt-n3.5.pt-n4.pt-n4.5.pt-n5.pt-n5.5.pt-n6 | .pr-6.pr-5.5.pr-5.pr-4.5.pr-4.pr-3.5.pr-3.pr-2.5.pr-2.pr-1.5.pr-1.pr-0.pr-n1.pr-n1.5.pr-n2.pr-n2.5.pr-n3.pr-n3.5.pr-n4.pr-n4.5.pr-n5.pr-n5.5.pr-n6 | .pb-6.pb-5.5.pb-5.pb-4.5.pb-4.pb-3.5.pb-3.pb-2.5.pb-2.pb-1.5.pb-1.pb-0.pb-n1.pb-n1.5.pb-n2.pb-n2.5.pb-n3.pb-n3.5.pb-n4.pb-n4.5.pb-n5.pb-n5.5.pb-n6 | .pl-6.pl-5.5.pl-5.pl-4.5.pl-4.pl-3.5.pl-3.pl-2.5.pl-2.pl-1.5.pl-1.pl-0.pl-n1.pl-n1.5.pl-n2.pl-n2.5.pl-n3.pl-n3.5.pl-n4.pl-n4.5.pl-n5.pl-n5.5.pl-n6 | .px-6.px-5.5.px-5.px-4.5.px-4.px-3.5.px-3.px-2.5.px-2.px-1.5.px-1.px-0.px-n1.px-n1.5.px-n2.px-n2.5.px-n3.px-n3.5.px-n4.px-n4.5.px-n5.px-n5.5.px-n6 | .py-6.py-5.5.py-5.py-4.5.py-4.py-3.5.py-3.py-2.5.py-2.py-1.5.py-1.py-0.py-n1.py-n1.5.py-n2.py-n2.5.py-n3.py-n3.5.py-n4.py-n4.5.py-n5.py-n5.5.py-n6 |