padding
The padding shorthand sets space between an element's content and its border on all four sides.
Syntax
padding: <top> <right> <bottom> <left>; /* 1 to 4 values */
Examples
.btn { padding: 0.5rem 1rem; }
.card { padding: 1.5rem; box-sizing: border-box; }
Output
Renders a button with comfortable horizontal padding and a card with even interior spacing.
Notes
Padding cannot be negative and does not collapse. With box-sizing:border-box, padding is included within the declared width/height. Use padding-inline/padding-block for logical sides.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 1.0 |
| firefox | 1.0 |
| safari | 1.0 |
| edge | 12 |