Padding System
A comprehensive padding scale that provides consistent internal spacing for all your interface elements.
Padding System
A comprehensive padding scale that provides consistent spacing for all your interface elements.
Large Padding
For major layout sections, hero areas, and prominent containers
Padding-64
64px
p-16Padding-48
48px
p-12Padding-32
32px
p-8Padding-24
24px
p-6Medium Padding
For standard components, cards, and general content areas
Padding-16
16px
p-4Padding-14
14px
p-[14px]Padding-12
12px
p-3Padding-10
10px
p-[10px]Small Padding
For compact components, buttons, and tight spacing requirements
Padding-8
8px
p-2Padding-4
4px
p-1Padding-2
2px
p-0.5Padding-0
0px
p-0Padding Usage Examples
Large Padding (64px)
Perfect for hero sections and major layout containers
Medium Padding (16px)
Standard padding for cards and content areas
Small Padding (8px)
Compact spacing for buttons and tight layouts