Padding
Visit https://tailwindcss.com/docs/padding (opens new window) for more information.
Padding
| Class | Description |
|---|
| .p-2 | padding: 2px or 0.125rem |
| .p-4 | padding: 4px or 0.25rem |
| .p-8 | padding: 8px or 0.5rem |
| .p-12 | padding: 12px or 0.75rem |
| .p-16 | padding: 167px or 1rem |
| .p-20 | padding: 20px or 1.25rem |
| .p-24 | padding: 24px or 1.5rem |
| .p-32 | padding: 32px or 2rem |
| .p-40 | padding: 40px or 2.5rem |
| .p-48 | padding: 48px or 3rem |
| .p-56 | padding: 56px or 3.5rem |
| .p-64 | padding: 64px or 4rem |
| .p-72 | padding: 782px or 4.5rem |
| .p-80 | padding: 80px or 5rem |
Vertical Padding (Y-Axis)
| Class | Description |
|---|
| .py-2 | padding: 2px or 0.125rem |
| .py-4 | padding: 4px or 0.25rem |
| .py-8 | padding: 8px or 0.5rem |
| .py-12 | padding: 12px or 0.75rem |
| .py-16 | padding: 167px or 1rem |
| .py-20 | padding: 20px or 1.25rem |
| .py-24 | padding: 24px or 1.5rem |
| .py-32 | padding: 32px or 2rem |
| .py-40 | padding: 40px or 2.5rem |
| .py-48 | padding: 48px or 3rem |
| .py-56 | padding: 56px or 3.5rem |
| .py-64 | padding: 64px or 4rem |
| .py-72 | padding: 782px or 4.5rem |
| .py-80 | padding: 80px or 5rem |
Horizontal Padding (X-Axis)
| Class | Description |
|---|
| .px-2 | padding: 2px or 0.125rem |
| .px-4 | padding: 4px or 0.25rem |
| .px-8 | padding: 8px or 0.5rem |
| .px-12 | padding: 12px or 0.75rem |
| .px-16 | padding: 167px or 1rem |
| .px-20 | padding: 20px or 1.25rem |
| .px-24 | padding: 24px or 1.5rem |
| .px-32 | padding: 32px or 2rem |
| .px-40 | padding: 40px or 2.5rem |
| .px-48 | padding: 48px or 3rem |
| .px-56 | padding: 56px or 3.5rem |
| .px-64 | padding: 64px or 4rem |
| .px-72 | padding: 782px or 4.5rem |
| .px-80 | padding: 80px or 5rem |
Padding Top
| Class | Description |
|---|
| .pt-2 | padding: 2px or 0.125rem |
| .pt-4 | padding: 4px or 0.25rem |
| .pt-8 | padding: 8px or 0.5rem |
| .pt-12 | padding: 12px or 0.75rem |
| .pt-16 | padding: 167px or 1rem |
| .pt-20 | padding: 20px or 1.25rem |
| .pt-24 | padding: 24px or 1.5rem |
| .pt-32 | padding: 32px or 2rem |
| .pt-40 | padding: 40px or 2.5rem |
| .pt-48 | padding: 48px or 3rem |
| .pt-56 | padding: 56px or 3.5rem |
| .pt-64 | padding: 64px or 4rem |
| .pt-72 | padding: 782px or 4.5rem |
| .pt-80 | padding: 80px or 5rem |
Padding Right
| Class | Description |
|---|
| .pr-2 | padding: 2px or 0.125rem |
| .pr-4 | padding: 4px or 0.25rem |
| .pr-8 | padding: 8px or 0.5rem |
| .pr-12 | padding: 12px or 0.75rem |
| .pr-16 | padding: 167px or 1rem |
| .pr-20 | padding: 20px or 1.25rem |
| .pr-24 | padding: 24px or 1.5rem |
| .pr-32 | padding: 32px or 2rem |
| .pr-40 | padding: 40px or 2.5rem |
| .pr-48 | padding: 48px or 3rem |
| .pr-56 | padding: 56px or 3.5rem |
| .pr-64 | padding: 64px or 4rem |
| .pr-72 | padding: 782px or 4.5rem |
| .pr-80 | padding: 80px or 5rem |
Padding Bottom
| Class | Description |
|---|
| .pb-2 | padding: 2px or 0.125rem |
| .pb-4 | padding: 4px or 0.25rem |
| .pb-8 | padding: 8px or 0.5rem |
| .pb-12 | padding: 12px or 0.75rem |
| .pb-16 | padding: 167px or 1rem |
| .pb-20 | padding: 20px or 1.25rem |
| .pb-24 | padding: 24px or 1.5rem |
| .pb-32 | padding: 32px or 2rem |
| .pb-40 | padding: 40px or 2.5rem |
| .pb-48 | padding: 48px or 3rem |
| .pb-56 | padding: 56px or 3.5rem |
| .pb-64 | padding: 64px or 4rem |
| .pb-72 | padding: 782px or 4.5rem |
| .pb-80 | padding: 80px or 5rem |
Padding Left
| Class | Description |
|---|
| .pl-2 | padding: 2px or 0.125rem |
| .pl-4 | padding: 4px or 0.25rem |
| .pl-8 | padding: 8px or 0.5rem |
| .pl-12 | padding: 12px or 0.75rem |
| .pl-16 | padding: 167px or 1rem |
| .pl-20 | padding: 20px or 1.25rem |
| .pl-24 | padding: 24px or 1.5rem |
| .pl-32 | padding: 32px or 2rem |
| .pl-40 | padding: 40px or 2.5rem |
| .pl-48 | padding: 48px or 3rem |
| .pl-56 | padding: 56px or 3.5rem |
| .pl-64 | padding: 64px or 4rem |
| .pl-72 | padding: 782px or 4.5rem |
| .pl-80 | padding: 80px or 5rem |