Spacing
Utilities for controlling an element's padding and margin
Padding
| Class | Properties |
|---|---|
p-0 |
padding: 0 |
p-1 |
padding: 0.25rem |
p-2 |
padding: 0.5rem |
p-3 |
padding: 0.75rem |
p-4 |
padding: 1rem |
p-5 |
padding: 1.25rem |
p-6 |
padding: 1.5rem |
p-7 |
padding: 2rem |
p-8 |
padding: 2.5rem |
p-9 |
padding: 3rem |
p-10 |
padding: 4rem |
p-11 |
padding: 5rem |
p-12 |
padding: 6rem |
p-13 |
padding: 8rem |
p-14 |
padding: 10rem |
p-15 |
padding: 12rem |
p-16 |
padding: 14rem |
p-17 |
padding: 16rem |
p-auto |
padding: auto |
py-1 |
padding-top: 0.25rem; padding-bottom: 0.25rem; |
py-2 |
padding-top: 0.5rem; padding-bottom: 0.5rem; |
py-3 |
padding-top: 0.75rem; padding-bottom: 0.75rem; |
py-4 |
padding-top: 1rem; padding-bottom: 1rem; |
py-5 |
padding-top: 1.25rem; padding-bottom: 1.25rem; |
py-6 |
padding-top: 1.5rem; padding-bottom: 1.5rem; |
py-7 |
padding-top: 2rem; padding-bottom: 2rem; |
py-8 |
padding-top: 2.5rem; padding-bottom: 2.5rem; |
py-9 |
padding-top: 3rem; padding-bottom: 3rem; |
py-10 |
padding-top: 4rem; padding-bottom: 4rem; |
py-11 |
padding-top: 5rem; padding-bottom: 5rem; |
py-12 |
padding-top: 6rem; padding-bottom: 6rem; |
py-13 |
padding-top: 8rem; padding-bottom: 8rem; |
py-14 |
padding-top: 10rem; padding-bottom: 10rem; |
py-15 |
padding-top: 12rem; padding-bottom: 12rem; |
py-16 |
padding-top: 14rem; padding-bottom: 14rem; |
py-17 |
padding-top: 16rem; padding-bottom: 16rem; |
py-auto |
padding-top: auto; padding-bottom: auto; |
px-0 |
padding-left: 0; padding-right: 0; |
px-1 |
padding-left: 0.25rem; padding-right: 0.25rem; |
px-2 |
padding-left: 0.25rem; padding-right: 0.25rem; |
px-3 |
padding-left: 0.75rem; padding-right: 0.75rem; |
px-4 |
padding-left: 1rem; padding-right: 1rem; |
px-5 |
padding-left: 1.25rem; padding-right: 1.25rem; |
px-6 |
padding-left: 1.5rem; padding-right: 1.5rem; |
px-7 |
padding-left: 2rem; padding-right: 2rem; |
px-8 |
padding-left: 2.5rem; padding-right: 2.5rem; |
px-9 |
padding-left: 3rem; padding-right: 3rem; |
px-10 |
padding-left: 4rem; padding-right: 4rem; |
px-11 |
padding-left: 5rem; padding-right: 5rem; |
px-12 |
padding-left: 6rem; padding-right: 6rem; |
px-13 |
padding-left: 8rem; padding-right: 8rem; |
px-14 |
padding-left: 10rem; padding-right: 10rem; |
px-15 |
padding-left: 12rem; padding-right: 12rem; |
px-16 |
padding-left: 14rem; padding-right: 14rem; |
px-17 |
padding-left: 16rem; padding-right: 16rem; |
px-auto |
padding-left: auto; padding-right: auto; |
pt-0 |
padding-top: 0; |
pt-1 |
padding-top: 0.25rem; |
pt-2 |
padding-top: 0.5rem; |
pt-3 |
padding-top: 0.75rem; |
pt-4 |
padding-top: 1rem; |
pt-5 |
padding-top: 1.25rem; |
pt-6 |
padding-top: 1.5rem; |
pt-7 |
padding-top: 2rem; |
pt-8 |
padding-top: 2.5rem; |
pt-9 |
padding-top: 3rem; |
pt-10 |
padding-top: 4rem; |
pt-11 |
padding-top: 5rem; |
pt-12 |
padding-top: 6rem; |
pt-13 |
padding-top: 8rem; |
pt-14 |
padding-top: 10rem; |
pt-15 |
padding-top: 12rem; |
pt-16 |
padding-top: 14rem; |
pt-17 |
padding-top: 16rem; |
pt-auto |
padding-top: auto; |
pr-0 |
padding-right: 0; |
pr-1 |
padding-right: 0.25rem; |
pr-2 |
padding-right: 0.5rem; |
pr-3 |
padding-right: 0.75rem; |
pr-4 |
padding-right: 1rem; |
pr-5 |
padding-right: 1.25rem; |
pr-6 |
padding-right: 1.5rem; |
pr-7 |
padding-right: 2rem; |
pr-8 |
padding-right: 2.5rem; |
pr-9 |
padding-right: 3rem; |
pr-10 |
padding-right: 4rem; |
pr-11 |
padding-right: 5rem; |
pr-12 |
padding-right: 6rem; |
pr-13 |
padding-right: 8rem; |
pr-14 |
padding-right: 10rem; |
pr-15 |
padding-right: 12rem; |
pr-16 |
padding-right: 14rem; |
pr-17 |
padding-right: 17rem; |
pr-auto |
padding-right: auto; |
pb-0 |
padding-bottom: 0; |
pb-1 |
padding-bottom: 0.25rem; |
pb-2 |
padding-bottom: 0.5rem; |
pb-3 |
padding-bottom: 0.75rem; |
pb-4 |
padding-bottom: 1rem; |
pb-5 |
padding-bottom: 1.25rem; |
pb-6 |
padding-bottom: 1.5rem; |
pb-7 |
padding-bottom: 2rem; |
pb-8 |
padding-bottom: 2.5rem; |
pb-9 |
padding-bottom: 3rem; |
pb-10 |
padding-bottom: 4rem; |
pb-11 |
padding-bottom: 5rem; |
pb-12 |
padding-bottom: 6rem; |
pb-13 |
padding-bottom: 8rem; |
pb-14 |
padding-bottom: 10rem; |
pb-15 |
padding-bottom: 12rem; |
pb-16 |
padding-bottom: 14rem; |
pb-17 |
padding-bottom: 16rem; |
pb-auto |
padding-bottom: auto; |
pl-0 |
padding-left: 0; |
pl-1 |
padding-left: 0.25rem; |
pl-2 |
padding-left: 0.5rem; |
pl-3 |
padding-left: 0.75rem; |
pl-4 |
padding-left: 1rem; |
pl-5 |
padding-left: 1.25rem; |
pl-6 |
padding-left: 1.5rem; |
pl-7 |
padding-left: 2rem; |
pl-8 |
padding-left: 2.5rem; |
pl-9 |
padding-left: 3rem; |
pl-10 |
padding-left: 4rem; |
pl-11 |
padding-left: 5rem; |
pl-12 |
padding-left: 6rem; |
pl-13 |
padding-left: 8rem; |
pl-14 |
padding-left: 10rem; |
pl-15 |
padding-left: 12rem; |
pl-16 |
padding-left: 14rem; |
pl-17 |
padding-left: 16rem; |
pl-auto |
padding-left: auto; |
Add padding to a single side
Control the padding on one side of an element using the p{t|r|b|l|x|y}-{size} utilities.
For example, pt-6 would add 1.5rem of padding to the top of an element, pr-4 would add 1rem of padding to the right of an element, pb-8 would add 2.5rem of padding to the bottom of an element, and pl-2 would add 0.5rem of padding to the left of an element.
pt-8
Target
pr-8
Target
pb-8
Target
pl-8
Target
Target
Target
Target
Target
Add horizontal padding
Control the horizontal padding of an element using the px-{size} utilities.
px-8
Target
Target
Add vertical padding
Control the vertical padding of an element using the py-{size} utilities.
py-8
Target
Target
Add padding to all sides
Control the padding on all sides of an element using the p-{size} utilities.
p-8
Target
Target
Margin
| Class | Properties |
|---|---|
m-0 |
margin: 0 |
m-1 |
margin: 0.25rem |
m-2 |
margin: 0.5rem |
m-3 |
margin: 0.75rem |
m-4 |
margin: 1rem |
m-5 |
margin: 1.25rem |
m-6 |
margin: 1.5rem |
m-7 |
margin: 2rem |
m-8 |
margin: 2.5rem |
m-9 |
margin: 3rem |
m-10 |
margin: 4rem |
m-11 |
margin: 5rem |
m-12 |
margin: 6rem |
m-13 |
margin: 8rem |
m-14 |
margin: 10rem |
m-15 |
margin: 12rem |
m-16 |
margin: 14rem |
m-17 |
margin: 16rem |
m-auto |
margin: auto |
my-1 |
margin-top: 0.25rem; margin-bottom: 0.25rem; |
my-2 |
margin-top: 0.5rem; margin-bottom: 0.5rem; |
my-3 |
margin-top: 0.75rem; margin-bottom: 0.75rem; |
my-4 |
margin-top: 1rem; margin-bottom: 1rem; |
my-5 |
margin-top: 1.25rem; margin-bottom: 1.25rem; |
my-6 |
margin-top: 1.5rem; margin-bottom: 1.5rem; |
my-7 |
margin-top: 2rem; margin-bottom: 2rem; |
my-8 |
margin-top: 2.5rem; margin-bottom: 2.5rem; |
my-9 |
margin-top: 3rem; margin-bottom: 3rem; |
my-10 |
margin-top: 4rem; margin-bottom: 4rem; |
my-11 |
margin-top: 5rem; margin-bottom: 5rem; |
my-12 |
margin-top: 6rem; margin-bottom: 6rem; |
my-13 |
margin-top: 8rem; margin-bottom: 8rem; |
my-14 |
margin-top: 10rem; margin-bottom: 10rem; |
my-15 |
margin-top: 12rem; margin-bottom: 12rem; |
my-16 |
margin-top: 14rem; margin-bottom: 14rem; |
my-17 |
margin-top: 16rem; margin-bottom: 16rem; |
my-auto |
margin-top: auto; margin-bottom: auto; |
mx-0 |
margin-left: 0; margin-right: 0; |
mx-1 |
margin-left: 0.25rem; margin-right: 0.25rem; |
mx-2 |
margin-left: 0.25rem; margin-right: 0.25rem; |
mx-3 |
margin-left: 0.75rem; margin-right: 0.75rem; |
mx-4 |
margin-left: 1rem; margin-right: 1rem; |
mx-5 |
margin-left: 1.25rem; margin-right: 1.25rem; |
mx-6 |
margin-left: 1.5rem; margin-right: 1.5rem; |
mx-7 |
margin-left: 2rem; margin-right: 2rem; |
mx-8 |
margin-left: 2.5rem; margin-right: 2.5rem; |
mx-9 |
margin-left: 3rem; margin-right: 3rem; |
mx-10 |
margin-left: 4rem; margin-right: 4rem; |
mx-11 |
margin-left: 5rem; margin-right: 5rem; |
mx-12 |
margin-left: 6rem; margin-right: 6rem; |
mx-13 |
margin-left: 8rem; margin-right: 8rem; |
mx-14 |
margin-left: 10rem; margin-right: 10rem; |
mx-15 |
margin-left: 12rem; margin-right: 12rem; |
mx-16 |
margin-left: 14rem; margin-right: 14rem; |
mx-17 |
margin-left: 16rem; margin-right: 16rem; |
mx-auto |
margin-left: auto; margin-right: auto; |
mt-0 |
margin-top: 0; |
mt-1 |
margin-top: 0.25rem; |
mt-2 |
margin-top: 0.5rem; |
mt-3 |
margin-top: 0.75rem; |
mt-4 |
margin-top: 1rem; |
mt-5 |
margin-top: 1.25rem; |
mt-6 |
margin-top: 1.5rem; |
mt-7 |
margin-top: 2rem; |
mt-8 |
margin-top: 2.5rem; |
mt-9 |
margin-top: 3rem; |
mt-10 |
margin-top: 4rem; |
mt-11 |
margin-top: 5rem; |
mt-12 |
margin-top: 6rem; |
mt-13 |
margin-top: 8rem; |
mt-14 |
margin-top: 10rem; |
mt-15 |
margin-top: 12rem; |
mt-16 |
margin-top: 14rem; |
mt-17 |
margin-top: 16rem; |
mt-auto |
margin-top: auto; |
mr-0 |
margin-right: 0; |
mr-1 |
margin-right: 0.25rem; |
mr-2 |
margin-right: 0.5rem; |
mr-3 |
margin-right: 0.75rem; |
mr-4 |
margin-right: 1rem; |
mr-5 |
margin-right: 1.25rem; |
mr-6 |
margin-right: 1.5rem; |
mr-7 |
margin-right: 2rem; |
mr-8 |
margin-right: 2.5rem; |
mr-9 |
margin-right: 3rem; |
mr-10 |
margin-right: 4rem; |
mr-11 |
margin-right: 5rem; |
mr-12 |
margin-right: 6rem; |
mr-13 |
margin-right: 8rem; |
mr-14 |
margin-right: 10rem; |
mr-15 |
margin-right: 12rem; |
mr-16 |
margin-right: 14rem; |
mr-17 |
margin-right: 17rem; |
mr-auto |
margin-right: auto; |
mb-0 |
margin-bottom: 0; |
mb-1 |
margin-bottom: 0.25rem; |
mb-2 |
margin-bottom: 0.5rem; |
mb-3 |
margin-bottom: 0.75rem; |
mb-4 |
margin-bottom: 1rem; |
mb-5 |
margin-bottom: 1.25rem; |
mb-6 |
margin-bottom: 1.5rem; |
mb-7 |
margin-bottom: 2rem; |
mb-8 |
margin-bottom: 2.5rem; |
mb-9 |
margin-bottom: 3rem; |
mb-10 |
margin-bottom: 4rem; |
mb-11 |
margin-bottom: 5rem; |
mb-12 |
margin-bottom: 6rem; |
mb-13 |
margin-bottom: 8rem; |
mb-14 |
margin-bottom: 10rem; |
mb-15 |
margin-bottom: 12rem; |
mb-16 |
margin-bottom: 14rem; |
mb-17 |
margin-bottom: 16rem; |
mb-auto |
margin-bottom: auto; |
ml-0 |
margin-left: 0; |
ml-1 |
margin-left: 0.25rem; |
ml-2 |
margin-left: 0.5rem; |
ml-3 |
margin-left: 0.75rem; |
ml-4 |
margin-left: 1rem; |
ml-5 |
margin-left: 1.25rem; |
ml-6 |
margin-left: 1.5rem; |
ml-7 |
margin-left: 2rem; |
ml-8 |
margin-left: 2.5rem; |
ml-9 |
margin-left: 3rem; |
ml-10 |
margin-left: 4rem; |
ml-11 |
margin-left: 5rem; |
ml-12 |
margin-left: 6rem; |
ml-13 |
margin-left: 8rem; |
ml-14 |
margin-left: 10rem; |
ml-15 |
margin-left: 12rem; |
ml-16 |
margin-left: 14rem; |
ml-17 |
margin-left: 16rem; |
ml-auto |
margin-left: auto; |
Add margin to a single side
Control the margin on one side of an element using the m{t|r|b|l|x|y}-{size} utilities.
For example, mt-6 would add 1.5rem of margin to the top of an element, mr-4 would add 1rem of margin to the right of an element, mb-8 would add 2.5rem of margin to the bottom of an element, and ml-2 would add 0.5rem of margin to the left of an element.
mt-8
Target
mr-8
Target
mb-8
Target
ml-8
Target
Target
Target
Target
Target
Add horizontal margin
Control the horizontal margin of an element using the mx-{size} utilities.
mx-8
Target
Target
Add vertical margin
Control the vertical margin of an element using the my-{size} utilities.
my-8
Target
Target
Add margin to all sides
Control the margin on all sides of an element using the m-{size} utilities.
m-8
Target
Target