Padding Utility Classes

Bellow is a Demonstration of How Padding Utility Works

All-around padding (p-*)
Padding applied equally to all sides
p-0
p-1
p-2
p-4
p-8
Directional padding (pt-*, pr-*, pb-*, pl-*)
Padding applied to specific sides

Top Padding (pt-*)

pt-0
pt-1
pt-2
pt-4
pt-8

Right Padding (pr-*)

pr-0
pr-1
pr-2
pr-4
pr-8

Bottom Padding (pb-*)

pb-0
pb-1
pb-2
pb-4
pb-8

Left Padding (pl-*)

pl-0
pl-1
pl-2
pl-4
pl-8
Combined Padding Example
Different padding values applied to each side
pt-8
pr-4
pb-2
pl-1
pt-1
pr-8
pb-4
pl-2
Padding Visual Comparison

No Padding

Content

With Padding

Content
Important Notes
  • Padding creates space inside an element, between its content and border
  • Unlike margin, padding is included in the element's click/tap area
  • Padding affects the element's total dimensions (unless using box-sizing: border-box)
  • Directional padding (top/right/bottom/left) can be combined
  • Padding values can use any CSS units (px, rem, em, %, etc.)
  • Negative padding values are invalid