CSS Padding

Padding is the transparent space inside an element’s border — between the border and the actual content. More padding = more breathing room for your content.

Try It — Padding in Action

Padding Shorthand

Shorthand	Sets
padding: 20px	All 4 sides = 20px
padding: 10px 30px	Top & Bottom = 10px, Left & Right = 30px
padding: 10px 20px 30px 40px	Top, Right, Bottom, Left (clockwise)

Padding vs Margin

	Padding	Margin
Location	Inside the border	Outside the border
Background	Shows element’s background	Always transparent
Collapse	Does not collapse	Adjacent margins collapse

Tip: When you need space inside a button or card, use padding. When you need space between two elements, use margin.