The CSS padding property
The CSS padding property adds space inside an element, between its content and its border. It is a shorthand: padding: 16px pads all four sides, padding: 10px 20px sets top/bottom then left/right. Unlike margin, padding can't be negative and it takes on the element's background color.
Overview
Padding is the cushion inside an element — the gap between its content and its border. It is what gives a button room around its label and a card room around its text, and it is filled with the element's own background rather than being transparent.
Like margin, it is a shorthand whose meaning depends on how many values you pass: one for all sides, two for top/bottom and left/right, and four going clockwise from the top. Unlike margin, it can never be negative and it never collapses.
The one thing to know is how padding interacts with width. By default the box model adds padding on top of the width you set, so a 200px-wide box with 20px of padding is actually 240px across. Setting box-sizing: border-box folds the padding back inside the declared width, which is why most modern stylesheets apply it to everything up front. It makes element sizes behave the way you would expect.
Syntax
selector {
/* all four sides */
padding: 16px;
/* top/bottom left/right */
padding: 12px 20px;
}
/* make width include padding */
* {
box-sizing: border-box;
}Values
The padding property accepts the values below. Every property also accepts the CSS-wide keywords inherit, initial, revert and unset.
| Value | Description |
|---|---|
length |
A fixed amount such as 16px, 1rem or 0.5em. |
percentage |
A share of the containing block's width, e.g. 5% — based on width even for the top and bottom. |
0 |
No padding. |
Example
<style>
* { box-sizing: border-box; }
.btn {
padding: 12px 22px;
background: #1c7ce9;
color: #fff;
border: 0;
border-radius: 8px;
font: 600 15px system-ui, sans-serif;
}
.card {
padding: 24px;
margin-top: 16px;
background: #f5f7fb;
border-radius: 10px;
font: 15px/1.5 system-ui, sans-serif;
}
</style>
<button class="btn">Padding gives me room</button>
<div class="card">24px of padding keeps this text clear of the card's edge.</div>Best practices
- Apply
box-sizing: border-boxglobally (*, *::before, *::after) so padding stays inside the width you set instead of inflating it. - Use padding, not fixed heights, to give buttons and inputs their size — they then grow gracefully with their text and stay easy to tap.
- Aim for a comfortable hit area on interactive elements: around 44px tall once padding is included keeps taps reliable on touch screens.
- Reach for the asymmetric shorthand (
padding: 12px 20px) rather than four separate declarations — it is shorter and easier to scan.
Frequently asked questions
What is the difference between padding and margin?
padding is space inside the border, between the content and the edge, and it takes the element's background. margin is space outside the border, and it is transparent.Why does padding make my element wider than I set?
width covers only the content, so padding is added on top. Set box-sizing: border-box and the declared width will include the padding.