CSS Padding
The CSS padding properties are used to generate space around an element's content, inside of any defined borders.
Table of Contents
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
Preview
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, usemargin.