Padding

Utilities for controlling an element's padding


Class reference

ClassProperties
p-0padding: 0;
p-pxpadding: 1px;
p-0.5padding: 0.125rem;
p-1padding: 0.25rem;
p-1.5padding: 0.375rem;
p-2padding: 0.5rem;
p-2.5padding: 0.625rem;
p-3padding: 0.75rem;
p-3.5padding: 0.875rem;
p-4padding: 1rem;
p-4.5padding: 1.125rem;
p-5padding: 1.25rem;
p-6padding: 1.5rem;
p-7padding: 1.75rem;
p-8padding: 2rem;
p-9padding: 2.25rem;
p-10padding: 2.5rem;
p-11padding: 2.75rem;
p-12padding: 3rem;
p-13padding: 3.25rem;
p-14padding: 3.5rem;
p-15padding: 3.75rem;
p-16padding: 4rem;
p-18padding: 4.5rem;
p-20padding: 5rem;
p-24padding: 6rem;
p-28padding: 7rem;
p-32padding: 8rem;
p-36padding: 9rem;
p-40padding: 10rem;
p-48padding: 12rem;
p-56padding: 14rem;
p-60padding: 15rem;
p-64padding: 16rem;
p-72padding: 18rem;
p-80padding: 20rem;
p-96padding: 24rem;
p-1/4padding: 25%;
p-1/2padding: 50%;
p-3/4padding: 75%;
p-fullpadding: 100%;
.px-0padding-left: 0; padding-right: 0;
.py-0padding-top: 0; padding-bottom: 0;
.pt-0padding-top: 0;
.pr-0padding-right: 0;
.pb-0padding-bottom: 0;
.pl-0padding-left: 0;
.px-pxpadding-left: 1px; padding-right: 1px;
.py-pxpadding-top: 1px; padding-bottom: 1px;
.pt-pxpadding-top: 1px;
.pr-pxpadding-right: 1px;
.pb-pxpadding-bottom: 1px;
.pl-pxpadding-left: 1px;
.px-0.5padding-left: 0.125rem; padding-right: 0.125rem;
.py-0.5padding-top: 0.125rem; padding-bottom: 0.125rem;
.pt-0.5padding-top: 0.125rem;
.pr-0.5padding-right: 0.125rem;
.pb-0.5padding-bottom: 0.125rem;
.pl-0.5padding-left: 0.125rem;
.px-1padding-left: 0.25rem; padding-right: 0.25rem;
.py-1padding-top: 0.25rem; padding-bottom: 0.25rem;
.pt-1padding-top: 0.25rem;
.pr-1padding-right: 0.25rem;
.pb-1padding-bottom: 0.25rem;
.pl-1padding-left: 0.25rem;
.px-1.5padding-left: 0.375rem; padding-right: 0.375rem;
.py-1.5padding-top: 0.375rem; padding-bottom: 0.375rem;
.pt-1.5padding-top: 0.375rem;
.pr-1.5padding-right: 0.375rem;
.pb-1.5padding-bottom: 0.375rem;
.pl-1.5padding-left: 0.375rem;
.px-2padding-left: 0.5rem; padding-right: 0.5rem;
.py-2padding-top: 0.5rem; padding-bottom: 0.5rem;
.pt-2padding-top: 0.5rem;
.pr-2padding-right: 0.5rem;
.pb-2padding-bottom: 0.5rem;
.pl-2padding-left: 0.5rem;
.px-2.5padding-left: 0.625rem; padding-right: 0.625rem;
.py-2.5padding-top: 0.625rem; padding-bottom: 0.625rem;
.pt-2.5padding-top: 0.625rem;
.pr-2.5padding-right: 0.625rem;
.pb-2.5padding-bottom: 0.625rem;
.pl-2.5padding-left: 0.625rem;
.px-3padding-left: 0.75rem; padding-right: 0.75rem;
.py-3padding-top: 0.75rem; padding-bottom: 0.75rem;
.pt-3padding-top: 0.75rem;
.pr-3padding-right: 0.75rem;
.pb-3padding-bottom: 0.75rem;
.pl-3padding-left: 0.75rem;
.px-3.5padding-left: 0.875rem; padding-right: 0.875rem;
.py-3.5padding-top: 0.875rem; padding-bottom: 0.875rem;
.pt-3.5padding-top: 0.875rem;
.pr-3.5padding-right: 0.875rem;
.pb-3.5padding-bottom: 0.875rem;
.pl-3.5padding-left: 0.875rem;
.px-4padding-left: 1rem; padding-right: 1rem;
.py-4padding-top: 1rem; padding-bottom: 1rem;
.pt-4padding-top: 1rem;
.pr-4padding-right: 1rem;
.pb-4padding-bottom: 1rem;
.pl-4padding-left: 1rem;
.px-4.5padding-left: 1.125rem; padding-right: 1.125rem;
.py-4.5padding-top: 1.125rem; padding-bottom: 1.125rem;
.pt-4.5padding-top: 1.125rem;
.pr-4.5padding-right: 1.125rem;
.pb-4.5padding-bottom: 1.125rem;
.pl-4.5padding-left: 1.125rem;
.px-5padding-left: 1.25rem; padding-right: 1.25rem;
.py-5padding-top: 1.25rem; padding-bottom: 1.25rem;
.pt-5padding-top: 1.25rem;
.pr-5padding-right: 1.25rem;
.pb-5padding-bottom: 1.25rem;
.pl-5padding-left: 1.25rem;
.px-6padding-left: 1.5rem; padding-right: 1.5rem;
.py-6padding-top: 1.5rem; padding-bottom: 1.5rem;
.pt-6padding-top: 1.5rem;
.pr-6padding-right: 1.5rem;
.pb-6padding-bottom: 1.5rem;
.pl-6padding-left: 1.5rem;
.px-7padding-left: 1.75rem; padding-right: 1.75rem;
.py-7padding-top: 1.75rem; padding-bottom: 1.75rem;
.pt-7padding-top: 1.75rem;
.pr-7padding-right: 1.75rem;
.pb-7padding-bottom: 1.75rem;
.pl-7padding-left: 1.75rem;
.px-8padding-left: 2rem; padding-right: 2rem;
.py-8padding-top: 2rem; padding-bottom: 2rem;
.pt-8padding-top: 2rem;
.pr-8padding-right: 2rem;
.pb-8padding-bottom: 2rem;
.pl-8padding-left: 2rem;
.px-9padding-left: 2.25rem; padding-right: 2.25rem;
.py-9padding-top: 2.25rem; padding-bottom: 2.25rem;
.pt-9padding-top: 2.25rem;
.pr-9padding-right: 2.25rem;
.pb-9padding-bottom: 2.25rem;
.pl-9padding-left: 2.25rem;
.px-10padding-left: 2.5rem; padding-right: 2.5rem;
.py-10padding-top: 2.5rem; padding-bottom: 2.5rem;
.pt-10padding-top: 2.5rem;
.pr-10padding-right: 2.5rem;
.pb-10padding-bottom: 2.5rem;
.pl-10padding-left: 2.5rem;
.px-11padding-left: 2.75rem; padding-right: 2.75rem;
.py-11padding-top: 2.75rem; padding-bottom: 2.75rem;
.pt-11padding-top: 2.75rem;
.pr-11padding-right: 2.75rem;
.pb-11padding-bottom: 2.75rem;
.pl-11padding-left: 2.75rem;
.px-12padding-left: 3rem; padding-right: 3rem;
.py-12padding-top: 3rem; padding-bottom: 3rem;
.pt-12padding-top: 3rem;
.pr-12padding-right: 3rem;
.pb-12padding-bottom: 3rem;
.pl-12padding-left: 3rem;
.px-13padding-left: 3.25rem; padding-right: 3.25rem;
.py-13padding-top: 3.25rem; padding-bottom: 3.25rem;
.pt-13padding-top: 3.25rem;
.pr-13padding-right: 3.25rem;
.pb-13padding-bottom: 3.25rem;
.pl-13padding-left: 3.25rem;
.px-14padding-left: 3.5rem; padding-right: 3.5rem;
.py-14padding-top: 3.5rem; padding-bottom: 3.5rem;
.pt-14padding-top: 3.5rem;
.pr-14padding-right: 3.5rem;
.pb-14padding-bottom: 3.5rem;
.pl-14padding-left: 3.5rem;
.px-15padding-left: 3.75rem; padding-right: 3.75rem;
.py-15padding-top: 3.75rem; padding-bottom: 3.75rem;
.pt-15padding-top: 3.75rem;
.pr-15padding-right: 3.75rem;
.pb-15padding-bottom: 3.75rem;
.pl-15padding-left: 3.75rem;
.px-16padding-left: 4rem; padding-right: 4rem;
.py-16padding-top: 4rem; padding-bottom: 4rem;
.pt-16padding-top: 4rem;
.pr-16padding-right: 4rem;
.pb-16padding-bottom: 4rem;
.pl-16padding-left: 4rem;
.px-18padding-left: 4.5rem; padding-right: 4.5rem;
.py-18padding-top: 4.5rem; padding-bottom: 4.5rem;
.pt-18padding-top: 4.5rem;
.pr-18padding-right: 4.5rem;
.pb-18padding-bottom: 4.5rem;
.pl-18padding-left: 4.5rem;
.px-20padding-left: 5rem; padding-right: 5rem;
.py-20padding-top: 5rem; padding-bottom: 5rem;
.pt-20padding-top: 5rem;
.pr-20padding-right: 5rem;
.pb-20padding-bottom: 5rem;
.pl-20padding-left: 5rem;
.px-24padding-left: 6rem; padding-right: 6rem;
.py-24padding-top: 6rem; padding-bottom: 6rem;
.pt-24padding-top: 6rem;
.pr-24padding-right: 6rem;
.pb-24padding-bottom: 6rem;
.pl-24padding-left: 6rem;
.px-28padding-left: 7rem; padding-right: 7rem;
.py-28padding-top: 7rem; padding-bottom: 7rem;
.pt-28padding-top: 7rem;
.pr-28padding-right: 7rem;
.pb-28padding-bottom: 7rem;
.pl-28padding-left: 7rem;
.px-32padding-left: 8rem; padding-right: 8rem;
.py-32padding-top: 8rem; padding-bottom: 8rem;
.pt-32padding-top: 8rem;
.pr-32padding-right: 8rem;
.pb-32padding-bottom: 8rem;
.pl-32padding-left: 8rem;
.px-36padding-left: 9rem; padding-right: 9rem;
.py-36padding-top: 9rem; padding-bottom: 9rem;
.pt-36padding-top: 9rem;
.pr-36padding-right: 9rem;
.pb-36padding-bottom: 9rem;
.pl-36padding-left: 9rem;
.px-40padding-left: 10rem; padding-right: 10rem;
.py-40padding-top: 10rem; padding-bottom: 10rem;
.pt-40padding-top: 10rem;
.pr-40padding-right: 10rem;
.pb-40padding-bottom: 10rem;
.pl-40padding-left: 10rem;
.px-48padding-left: 12rem; padding-right: 12rem;
.py-48padding-top: 12rem; padding-bottom: 12rem;
.pt-48padding-top: 12rem;
.pr-48padding-right: 12rem;
.pb-48padding-bottom: 12rem;
.pl-48padding-left: 12rem;
.px-56padding-left: 14rem; padding-right: 14rem;
.py-56padding-top: 14rem; padding-bottom: 14rem;
.pt-56padding-top: 14rem;
.pr-56padding-right: 14rem;
.pb-56padding-bottom: 14rem;
.pl-56padding-left: 14rem;
.px-60padding-left: 15rem; padding-right: 15rem;
.py-60padding-top: 15rem; padding-bottom: 15rem;
.pt-60padding-top: 15rem;
.pr-60padding-right: 15rem;
.pb-60padding-bottom: 15rem;
.pl-60padding-left: 15rem;
.px-64padding-left: 16rem; padding-right: 16rem;
.py-64padding-top: 16rem; padding-bottom: 16rem;
.pt-64padding-top: 16rem;
.pr-64padding-right: 16rem;
.pb-64padding-bottom: 16rem;
.pl-64padding-left: 16rem;
.px-72padding-left: 18rem; padding-right: 18rem;
.py-72padding-top: 18rem; padding-bottom: 18rem;
.pt-72padding-top: 18rem;
.pr-72padding-right: 18rem;
.pb-72padding-bottom: 18rem;
.pl-72padding-left: 18rem;
.px-80padding-left: 20rem; padding-right: 20rem;
.py-80padding-top: 20rem; padding-bottom: 20rem;
.pt-80padding-top: 20rem;
.pr-80padding-right: 20rem;
.pb-80padding-bottom: 20rem;
.pl-80padding-left: 20rem;
.px-96padding-left: 24rem; padding-right: 24rem;
.py-96padding-top: 24rem; padding-bottom: 24rem;
.pt-96padding-top: 24rem;
.pr-96padding-right: 24rem;
.pb-96padding-bottom: 24rem;
.pl-96padding-left: 24rem;
.px-1/4padding-left: 25%; padding-right: 25%;
.py-1/4padding-top: 25%; padding-bottom: 25%;
.pt-1/4padding-top: 25%;
.pr-1/4padding-right: 25%;
.pb-1/4padding-bottom: 25%;
.pl-1/4padding-left: 25%;
.px-1/2padding-left: 50%; padding-right: 50%;
.py-1/2padding-top: 50%; padding-bottom: 50%;
.pt-1/2padding-top: 50%;
.pr-1/2padding-right: 50%;
.pb-1/2padding-bottom: 50%;
.pl-1/2padding-left: 50%;
.px-3/4padding-left: 75%; padding-right: 75%;
.py-3/4padding-top: 75%; padding-bottom: 75%;
.pt-3/4padding-top: 75%;
.pr-3/4padding-right: 75%;
.pb-3/4padding-bottom: 75%;
.pl-3/4padding-left: 75%;
.px-fullpadding-left: 100%; padding-right: 100%;
.py-fullpadding-top: 100%; padding-bottom: 100%;
.pt-fullpadding-top: 100%;
.pr-fullpadding-right: 100%;
.pb-fullpadding-bottom: 100%;
.pl-fullpadding-left: 100%;

# Add padding to a single side

Control the padding on one side of an element using the p{t|r|b|l}-{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 2rem of padding to the bottom of an element, and pl-2 would add 0.5rem of padding to the left of an element.

pt-6
pr-4
pb-8
pl-2
<div class="pt-6 ...">pt-6</div>
<div class="pr-4 ...">pr-4</div>
<div class="pb-8 ...">pb-8</div>
<div class="pl-2 ...">pl-2</div>

# Add horizontal padding

Control the horizontal padding of an element using the px-{size} utilities.

px-8
<div class="px-8 ...">px-8</div>

# Add vertical padding

Control the vertical padding of an element using the py-{size} utilities.

py-8
<div class="py-8 ...">py-8</div>

# Add padding to all sides

Control the padding on all sides of an element using the p-{size} utilities.

p-8
<div class="p-8 ...">p-8</div>

# Responsive

To control the padding of an element at a specific breakpoint, add a {screen}: prefix to any existing padding utility. For example, adding the class md:py-8 to an element would apply the py-8 utility at medium screen sizes and above.

<div class="md:py-8 ...">
<!-- ... -->
</div>

For more information about Elements’ responsive design features, check out the Responsive Design documentation.