Padding
Utilities for controlling an element's padding.
| Namespace | Output |
|---|---|
| p-0 | { padding: 0 } |
| p-1 | { padding: 4 } |
| p-2 | { padding: 8 } |
| p-3 | { padding: 12 } |
| p-4 | { padding: 16 } |
| p-5 | { padding: 20 } |
| p-6 | { padding: 24 } |
| p-7 | { padding: 28 } |
| p-8 | { padding: 32 } |
| p-9 | { padding: 36 } |
| p-10 | { padding: 40 } |
| p-12 | { padding: 48 } |
| p-16 | { padding: 64 } |
| p-20 | { padding: 80 } |
| p-24 | { padding: 96 } |
| p-32 | { padding: 128 } |
| p-40 | { padding: 160 } |
| p-48 | { padding: 192 } |
| p-56 | { padding: 224 } |
| p-64 | { padding: 256 } |
| p-px | { padding: 2 } |
| py-0 | { paddingTop: 0, paddingBottom: 0 } |
| py-1 | { paddingTop: 4 , paddingBottom: 4 } |
| py-2 | { paddingTop: 8 , paddingBottom: 8 } |
| py-3 | { paddingTop: 12, paddingBottom: 12 } |
| py-4 | { paddingTop: 16, paddingBottom: 16 } |
| py-5 | { paddingTop: 20, paddingBottom: 20 } |
| py-6 | { paddingTop: 24, paddingBottom: 24 } |
| py-7 | { paddingTop: 28, paddingBottom: 28 } |
| py-8 | { paddingTop: 32, paddingBottom: 32 } |
| py-9 | { paddingTop: 36, paddingBottom: 36 } |
| py-10 | { paddingTop: 40, paddingBottom: 40 } |
| py-12 | { paddingTop: 48, paddingBottom: 48 } |
| py-16 | { paddingTop: 64, paddingBottom: 64 } |
| py-20 | { paddingTop: 80, paddingBottom: 80 } |
| py-24 | { paddingTop: 96, paddingBottom: 96 } |
| py-32 | { paddingTop: 12, paddingBottom: 128 } |
| py-40 | { paddingTop: 16, paddingBottom: 160 } |
| py-48 | { paddingTop: 19, paddingBottom: 192 } |
| py-56 | { paddingTop: 22, paddingBottom: 224 } |
| py-64 | { paddingTop: 25, paddingBottom: 256 } |
| py-px | { paddingTop: 2, paddingBottom: 2} |
| px-0 | { paddingRight: 0, paddingLeft: 0 } |
| px-1 | { paddingRight: 4 , paddingLeft: 4 } |
| px-2 | { paddingRight: 8 , paddingLeft: 8 } |
| px-3 | { paddingRight: 12, paddingLeft: 12 } |
| px-4 | { paddingRight: 16, paddingLeft: 16 } |
| px-5 | { paddingRight: 20, paddingLeft: 20 } |
| px-6 | { paddingRight: 24, paddingLeft: 24 } |
| px-7 | { paddingRight: 28, paddingLeft: 28 } |
| px-8 | { paddingRight: 32, paddingLeft: 32 } |
| px-9 | { paddingRight: 36, paddingLeft: 36 } |
| px-10 | { paddingRight: 40, paddingLeft: 40 } |
| px-12 | { paddingRight: 48, paddingLeft: 48 } |
| px-16 | { paddingRight: 64, paddingLeft: 64 } |
| px-20 | { paddingRight: 80, paddingLeft: 80 } |
| px-24 | { paddingRight: 96, paddingLeft: 96 } |
| px-32 | { paddingRight: 12, paddingLeft: 128 } |
| px-40 | { paddingRight: 16, paddingLeft: 160 } |
| px-48 | { paddingRight: 19, paddingLeft: 192 } |
| px-56 | { paddingRight: 22, paddingLeft: 224 } |
| px-64 | { paddingRight: 25, paddingLeft: 256 } |
| px-px | { paddingRight: 2, paddingLeft: 2 } |
| pt-0 | { paddingTop: 0 } |
| pt-1 | { paddingTop: 4 } |
| pt-2 | { paddingTop: 8 } |
| pt-3 | { paddingTop: 12 } |
| pt-4 | { paddingTop: 16 } |
| pt-5 | { paddingTop: 20 } |
| pt-6 | { paddingTop: 24 } |
| pt-7 | { paddingTop: 28 } |
| pt-8 | { paddingTop: 32 } |
| pt-9 | { paddingTop: 36 } |
| pt-10 | { paddingTop: 40 } |
| pt-12 | { paddingTop: 48 } |
| pt-16 | { paddingTop: 64 } |
| pt-20 | { paddingTop: 80 } |
| pt-24 | { paddingTop: 96 } |
| pt-32 | { paddingTop: 128 } |
| pt-40 | { paddingTop: 160 } |
| pt-48 | { paddingTop: 192 } |
| pt-56 | { paddingTop: 224 } |
| pt-64 | { paddingTop: 256 } |
| pt-px | { paddingTop: 2 } |
| pr-0 | { paddingRight: 0 } |
| pr-1 | { paddingRight: 4 } |
| pr-2 | { paddingRight: 8 } |
| pr-3 | { paddingRight: 12 } |
| pr-4 | { paddingRight: 16 } |
| pr-5 | { paddingRight: 20 } |
| pr-6 | { paddingRight: 24 } |
| pr-7 | { paddingRight: 28 } |
| pr-8 | { paddingRight: 32 } |
| pr-9 | { paddingRight: 36 } |
| pr-10 | { paddingRight: 40 } |
| pr-12 | { paddingRight: 48 } |
| pr-16 | { paddingRight: 64 } |
| pr-20 | { paddingRight: 80 } |
| pr-24 | { paddingRight: 96 } |
| pr-32 | { paddingRight: 128 } |
| pr-40 | { paddingRight: 160 } |
| pr-48 | { paddingRight: 192 } |
| pr-56 | { paddingRight: 224 } |
| pr-64 | { paddingRight: 256 } |
| pr-px | { paddingRight: 2 } |
| pb-0 | { paddingBottom: 0 } |
| pb-1 | { paddingBottom: 4 } |
| pb-2 | { paddingBottom: 8 } |
| pb-3 | { paddingBottom: 12 } |
| pb-4 | { paddingBottom: 16 } |
| pb-5 | { paddingBottom: 20 } |
| pb-6 | { paddingBottom: 24 } |
| pb-7 | { paddingBottom: 28 } |
| pb-8 | { paddingBottom: 32 } |
| pb-9 | { paddingBottom: 36 } |
| pb-10 | { paddingBottom: 40 } |
| pb-12 | { paddingBottom: 48 } |
| pb-16 | { paddingBottom: 64 } |
| pb-20 | { paddingBottom: 80 } |
| pb-24 | { paddingBottom: 96 } |
| pb-32 | { paddingBottom: 128 } |
| pb-40 | { paddingBottom: 160 } |
| pb-48 | { paddingBottom: 192 } |
| pb-56 | { paddingBottom: 224 } |
| pb-64 | { paddingBottom: 256 } |
| pb-px | { paddingBottom: 2 } |
| pl-0 | { paddingLeft: 0 } |
| pl-1 | { paddingLeft: 4 } |
| pl-2 | { paddingLeft: 8 } |
| pl-3 | { paddingLeft: 12 } |
| pl-4 | { paddingLeft: 16 } |
| pl-5 | { paddingLeft: 20 } |
| pl-6 | { paddingLeft: 24 } |
| pl-7 | { paddingLeft: 28 } |
| pl-8 | { paddingLeft: 32 } |
| pl-9 | { paddingLeft: 36 } |
| pl-10 | { paddingLeft: 40 } |
| pl-12 | { paddingLeft: 48 } |
| pl-16 | { paddingLeft: 64 } |
| pl-20 | { paddingLeft: 80 } |
| pl-24 | { paddingLeft: 96 } |
| pl-32 | { paddingLeft: 128 } |
| pl-40 | { paddingLeft: 160 } |
| pl-48 | { paddingLeft: 192 } |
| pl-56 | { paddingLeft: 224 } |
| pl-64 | { paddingLeft: 256 } |
| pl-px | { paddingLeft: 2 } |