Spacing
Padding
Utilities for controlling an element's padding.
Quick reference
| Class | Properties |
|---|---|
| p-0 | padding: 0rem; |
| p-1 | padding: 0.0625rem; |
| p-2 | padding: 0.125rem; |
| p-4 | padding: 0.25rem; |
| p-8 | padding: 0.5rem; |
| p-12 | padding: 0.75rem; |
| p-16 | padding: 1rem; |
| p-20 | padding: 1.25rem; |
| p-24 | padding: 1.5rem; |
| p-32 | padding: 2rem; |
| p-48 | padding: 3rem; |
| p-64 | padding: 4rem; |
| p-96 | padding: 6rem; |
| pt-0 | padding-top: 0rem; |
| pt-1 | padding-top: 0.0625rem; |
| pt-2 | padding-top: 0.125rem; |
| pt-4 | padding-top: 0.25rem; |
| pt-8 | padding-top: 0.5rem; |
| pt-12 | padding-top: 0.75rem; |
| pt-16 | padding-top: 1rem; |
| pt-20 | padding-top: 1.25rem; |
| pt-24 | padding-top: 1.5rem; |
| pt-32 | padding-top: 2rem; |
| pt-48 | padding-top: 3rem; |
| pt-64 | padding-top: 4rem; |
| pt-96 | padding-top: 6rem; |
| pl-0 | padding-left: 0rem; |
| pl-1 | padding-left: 0.0625rem; |
| pl-2 | padding-left: 0.125rem; |
| pl-4 | padding-left: 0.25rem; |
| pl-8 | padding-left: 0.5rem; |
| pl-12 | padding-left: 0.75rem; |
| pl-16 | padding-left: 1rem; |
| pl-20 | padding-left: 1.25rem; |
| pl-24 | padding-left: 1.5rem; |
| pl-32 | padding-left: 2rem; |
| pl-48 | padding-left: 3rem; |
| pl-64 | padding-left: 4rem; |
| pl-96 | padding-left: 6rem; |
| pb-0 | padding-bottom: 0rem; |
| pb-1 | padding-bottom: 0.0625rem; |
| pb-2 | padding-bottom: 0.125rem; |
| pb-4 | padding-bottom: 0.25rem; |
| pb-8 | padding-bottom: 0.5rem; |
| pb-12 | padding-bottom: 0.75rem; |
| pb-16 | padding-bottom: 1rem; |
| pb-20 | padding-bottom: 1.25rem; |
| pb-24 | padding-bottom: 1.5rem; |
| pb-32 | padding-bottom: 2rem; |
| pb-48 | padding-bottom: 3rem; |
| pb-64 | padding-bottom: 4rem; |
| pb-96 | padding-bottom: 6rem; |
| pr-0 | padding-right: 0rem; |
| pr-1 | padding-right: 0.0625rem; |
| pr-2 | padding-right: 0.125rem; |
| pr-4 | padding-right: 0.25rem; |
| pr-8 | padding-right: 0.5rem; |
| pr-12 | padding-right: 0.75rem; |
| pr-16 | padding-right: 1rem; |
| pr-20 | padding-right: 1.25rem; |
| pr-24 | padding-right: 1.5rem; |
| pr-32 | padding-right: 2rem; |
| pr-48 | padding-right: 3rem; |
| pr-64 | padding-right: 4rem; |
| pr-96 | padding-right: 6rem; |
| px-0 | padding-left: 0rem; padding-right: 0rem; |
| px-1 | padding-left: 0.0625rem; padding-right: 0.0625rem; |
| px-2 | padding-left: 0.125rem; padding-right: 0.125rem; |
| px-4 | padding-left: 0.25rem; padding-right: 0.25rem; |
| px-8 | padding-left: 0.5rem; padding-right: 0.5rem; |
| px-12 | padding-left: 0.75rem; padding-right: 0.75rem; |
| px-16 | padding-left: 1rem; padding-right: 1rem; |
| px-20 | padding-left: 1.25rem; padding-right: 1.25rem; |
| px-24 | padding-left: 1.5rem; padding-right: 1.5rem; |
| px-32 | padding-left: 2rem; padding-right: 2rem; |
| px-48 | padding-left: 3rem; padding-right: 3rem; |
| px-64 | padding-left: 4rem; padding-right: 4rem; |
| px-96 | padding-left: 6rem; padding-right: 6rem; |
| py-0 | padding-top: 0rem; padding-bottom: 0rem; |
| py-1 | padding-top: 0.0625rem; padding-bottom: 0.0625rem; |
| py-2 | padding-top: 0.125rem; padding-bottom: 0.125rem; |
| py-4 | padding-top: 0.25rem; padding-bottom: 0.25rem; |
| py-8 | padding-top: 0.5rem; padding-bottom: 0.5rem; |
| py-12 | padding-top: 0.75rem; padding-bottom: 0.75rem; |
| py-16 | padding-top: 1rem; padding-bottom: 1rem; |
| py-20 | padding-top: 1.25rem; padding-bottom: 1.25rem; |
| py-24 | padding-top: 1.5rem; padding-bottom: 1.5rem; |
| py-32 | padding-top: 2rem; padding-bottom: 2rem; |
| py-48 | padding-top: 3rem; padding-bottom: 3rem; |
| py-64 | padding-top: 4rem; padding-bottom: 4rem; |
| py-96 | padding-top: 6rem; padding-bottom: 6rem; |
Basic usage
Control the padding on one side of an element using the p{t|r|b|l|x|y}-{$spacing} utilities.
Customization
$spacing values can be configured using theme.spacing.
Table of Contents