Padding

Overview

These classes can be used to add padding to elements on the screen. Padding is the space between the content of an element and its border. It can be used to create space between elements, improve readability, and create visual interest in the project. As a general rule, there should always be some space between the content of an element and its border to make the element easier to read and interact with.

Classes

Class	Description
p-0	Removes all padding from the element.
p-1	Adds padding to all sides of the element equal to 0.25rem.
p-2	Adds padding to all sides of the element equal to 0.5rem.
p-3	Adds padding to all sides of the element equal to 0.75rem.
p-4	Adds padding to all sides of the element equal to 1rem.
p-5	Adds padding to all sides of the element equal to 1.25rem.
p-6	Adds padding to all sides of the element equal to 1.5rem.
p-8	Adds padding to all sides of the element equal to 2rem.
p-10	Adds padding to all sides of the element equal to 2.5rem.
p-12	Adds padding to all sides of the element equal to 3rem.
p-16	Adds padding to all sides of the element equal to 4rem.
p-20	Adds padding to all sides of the element equal to 5rem.
p-24	Adds padding to all sides of the element equal to 6rem.
p-32	Adds padding to all sides of the element equal to 8rem.
p-40	Adds padding to all sides of the element equal to 10rem.
p-48	Adds padding to all sides of the element equal to 12rem.
p-56	Adds padding to all sides of the element equal to 14rem.
p-64	Adds padding to all sides of the element equal to 16rem.

Class	Description
px-0	Removes horizontal padding from the element.
px-1	Adds horizontal padding to the element equal to 0.25rem.
px-2	Adds horizontal padding to the element equal to 0.5rem.
px-3	Adds horizontal padding to the element equal to 0.75rem.
px-4	Adds horizontal padding to the element equal to 1rem.
px-5	Adds horizontal padding to the element equal to 1.25rem.
px-6	Adds horizontal padding to the element equal to 1.5rem.
px-8	Adds horizontal padding to the element equal to 2rem.
px-10	Adds horizontal padding to the element equal to 2.5rem.
px-12	Adds horizontal padding to the element equal to 3rem.
px-16	Adds horizontal padding to the element equal to 4rem.
px-20	Adds horizontal padding to the element equal to 5rem.
px-24	Adds horizontal padding to the element equal to 6rem.
px-32	Adds horizontal padding to the element equal to 8rem.
px-40	Adds horizontal padding to the element equal to 10rem.
px-48	Adds horizontal padding to the element equal to 12rem.
px-56	Adds horizontal padding to the element equal to 14rem.
px-64	Adds horizontal padding to the element equal to 16rem.

Class	Description
py-0	Removes vertical padding from the element.
py-1	Adds vertical padding to the element equal to 0.25rem.
py-2	Adds vertical padding to the element equal to 0.5rem.
py-3	Adds vertical padding to the element equal to 0.75rem.
py-4	Adds vertical padding to the element equal to 1rem.
py-5	Adds vertical padding to the element equal to 1.25rem.
py-6	Adds vertical padding to the element equal to 1.5rem.
py-8	Adds vertical padding to the element equal to 2rem.
py-10	Adds vertical padding to the element equal to 2.5rem.
py-12	Adds vertical padding to the element equal to 3rem.
py-16	Adds vertical padding to the element equal to 4rem.
py-20	Adds vertical padding to the element equal to 5rem.
py-24	Adds vertical padding to the element equal to 6rem.
py-32	Adds vertical padding to the element equal to 8rem.
py-40	Adds vertical padding to the element equal to 10rem.
py-48	Adds vertical padding to the element equal to 12rem.
py-56	Adds vertical padding to the element equal to 14rem.
py-64	Adds vertical padding to the element equal to 16rem.

Class	Description
pt-0	Removes top padding from the element.
pt-1	Adds top padding to the element equal to 0.25rem.
pt-2	Adds top padding to the element equal to 0.5rem.
pt-3	Adds top padding to the element equal to 0.75rem.
pt-4	Adds top padding to the element equal to 1rem.
pt-5	Adds top padding to the element equal to 1.25rem.
pt-6	Adds top padding to the element equal to 1.5rem.
pt-8	Adds top padding to the element equal to 2rem.
pt-10	Adds top padding to the element equal to 2.5rem.
pt-12	Adds top padding to the element equal to 3rem.
pt-16	Adds top padding to the element equal to 4rem.
pt-20	Adds top padding to the element equal to 5rem.
pt-24	Adds top padding to the element equal to 6rem.
pt-32	Adds top padding to the element equal to 8rem.
pt-40	Adds top padding to the element equal to 10rem.
pt-48	Adds top padding to the element equal to 12rem.
pt-56	Adds top padding to the element equal to 14rem.
pt-64	Adds top padding to the element equal to 16rem.

Class	Description
pr-0	Removes right padding from the element.
pr-1	Adds right padding to the element equal to 0.25rem.
pr-2	Adds right padding to the element equal to 0.5rem.
pr-3	Adds right padding to the element equal to 0.75rem.
pr-4	Adds right padding to the element equal to 1rem.
pr-5	Adds right padding to the element equal to 1.25rem.
pr-6	Adds right padding to the element equal to 1.5rem.
pr-8	Adds right padding to the element equal to 2rem.
pr-10	Adds right padding to the element equal to 2.5rem.
pr-12	Adds right padding to the element equal to 3rem.
pr-16	Adds right padding to the element equal to 4rem.
pr-20	Adds right padding to the element equal to 5rem.
pr-24	Adds right padding to the element equal to 6rem.
pr-32	Adds right padding to the element equal to 8rem.
pr-40	Adds right padding to the element equal to 10rem.
pr-48	Adds right padding to the element equal to 12rem.
pr-56	Adds right padding to the element equal to 14rem.
pr-64	Adds right padding to the element equal to 16rem.

Class	Description
pb-0	Removes bottom padding from the element.
pb-1	Adds bottom padding to the element equal to 0.25rem.
pb-2	Adds bottom padding to the element equal to 0.5rem.
pb-3	Adds bottom padding to the element equal to 0.75rem.
pb-4	Adds bottom padding to the element equal to 1rem.
pb-5	Adds bottom padding to the element equal to 1.25rem.
pb-6	Adds bottom padding to the element equal to 1.5rem.
pb-8	Adds bottom padding to the element equal to 2rem.
pb-10	Adds bottom padding to the element equal to 2.5rem.
pb-12	Adds bottom padding to the element equal to 3rem.
pb-16	Adds bottom padding to the element equal to 4rem.
pb-20	Adds bottom padding to the element equal to 5rem.
pb-24	Adds bottom padding to the element equal to 6rem.
pb-32	Adds bottom padding to the element equal to 8rem.
pb-40	Adds bottom padding to the element equal to 10rem.
pb-48	Adds bottom padding to the element equal to 12rem.
pb-56	Adds bottom padding to the element equal to 14rem.
pb-64	Adds bottom padding to the element equal to 16rem.

Class	Description
pl-0	Removes left padding from the element.
pl-1	Adds left padding to the element equal to 0.25rem.
pl-2	Adds left padding to the element equal to 0.5rem.
pl-3	Adds left padding to the element equal to 0.75rem.
pl-4	Adds left padding to the element equal to 1rem.
pl-5	Adds left padding to the element equal to 1.25rem.
pl-6	Adds left padding to the element equal to 1.5rem.
pl-8	Adds left padding to the element equal to 2rem.
pl-10	Adds left padding to the element equal to 2.5rem.
pl-12	Adds left padding to the element equal to 3rem.
pl-16	Adds left padding to the element equal to 4rem.
pl-20	Adds left padding to the element equal to 5rem.
pl-24	Adds left padding to the element equal to 6rem.
pl-32	Adds left padding to the element equal to 8rem.
pl-40	Adds left padding to the element equal to 10rem.
pl-48	Adds left padding to the element equal to 12rem.
pl-56	Adds left padding to the element equal to 14rem.
pl-64	Adds left padding to the element equal to 16rem.