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
.mr-3
Padding
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 |