Padding and Margin
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
Responsive spacing
Spacing utility classes that apply to all breakpoints, from sm to xl, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0; and up, and thus are not bound by a media query.
As such, the classes are named using the format:
m{t|r|b|l|x|y}-{breakpoint}-{value}forsm,md,lg,andxl.p{t|r|b|l|x|y}-{breakpoint}-{value}forsm,md,lg,andxl.m-{breakpoint}-{value}forsm,md,lg,andxl.p-{breakpoint}-{value}forsm,md,lg,andxl.
Where value is one of: 0-17 and auto