padding
The padding CSS shorthand property sets the padding area on all four sides of an element at once.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
| Other | ||||||
| The padding-bottom CSS property sets the height of the padding area on the bottom of an element. | 1 | 12 | 1 | 1 | 18 | 1 |
| The padding-left CSS property sets the width of the padding area to the left of an element. | 1 | 12 | 1 | 1 | 18 | 1 |
| The padding-right CSS property sets the width of the padding area on the right of an element. | 1 | 12 | 1 | 1 | 18 | 1 |
| The padding-top CSS property sets the height of the padding area on the top of an element. | 1 | 12 | 1 | 1 | 18 | 1 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
CSS
.card {
padding: 16px;
}
.section {
padding: 24px 32px 24px 32px;
}Live demo
Padding: 24px 32px(vertical/horizontal)
CSS Padding: 24px 32px(vertical/horizontal) demo.
PreviewFullscreen
Use cases
-
Touch-friendly controls
Increase the internal space of buttons and inputs to improve hit area and comfort.
-
Readable content blocks
Keep text from crowding container edges in cards, panels, and alerts.
Cautions
- Padding changes the usable content area, so very small containers can shrink faster than expected.
- Uneven padding across similar components can make the interface feel unstable or misaligned.
Accessibility
- Generous padding can improve readability and pointer usability, especially on mobile and touch devices.