Padding
Add breathing room between content and its border.
Step 1 of 3
Padding: space inside the box
Padding is the space between the content and the border. It exists so content doesn't press right up against the edges — imagine a button on Amazon where the text "Add to Cart" is crammed against the edge with no room to read it.
You can set padding independently for each side: top, right, bottom, and left. In the box model, padding is the green layer that wraps around the blue content.
Think of it this way: Padding is like the foam inside a shipping box. It protects the contents by creating space between them and the box walls.
Web Standard
Padding contributes to the element's background area — background colors and images extend through the padding, not just the content.
Learn more on MDN
THE CSS BOX MODEL
margin
border
padding
content
Content
Padding
Border
Margin