padding
padding creates space inside an element between its border and content. It shapes touch targets, readable text blocks, and overall component density.
Overview
padding creates space inside an element between its border and content. It shapes touch targets, readable text blocks, and overall component density.
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 |
Syntax
.card {
padding: 16px;
}
.section {
padding: 24px 32px 24px 32px;
}Live demo
Padding: 24px 32px(vertical/horizontal)
CSS Padding: 24px 32px(vertical/horizontal) demo.
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.
Related links
Powered by web-features