Padding Property
Last updated: 2026-09-13
padding Padding Property
The padding property sets the space between an element's content and its border. A core part of the CSS box model, it is commonly used to give content breathing room inside a container, enlarge click targets, and make content stand out against a background. Padding values can only be lengths or percentages, never negative, and padding never collapses.
| Category | |
|---|---|
| Initial Value | 0 |
| Inherited | No |
| Applies To | all |
| Animation Type | length |
| CSS Version | CSS1 |
| Status | Standard |
📝 Syntax
padding: <length> | <percentage>;⚙️ Values
| Value | Type | Description |
|---|---|---|
<length> | Type | A fixed padding value. |
<percentage> | Type | A percentage relative to the containing block's width. |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| padding | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Warning： By default, padding is added outside width/height (content-box), which can make an element larger than expected. Setting box-sizing:border-box includes padding within the specified width and height.
Tip： Percentage padding is always computed against the containing block's width, including padding-top and padding-bottom.
❓ FAQ
QCan padding be negative?
ANo. Padding accepts only lengths or percentages and can never be negative; a negative value is treated as an invalid declaration and ignored. If you need to push content outward, reduce the padding instead, or use a negative margin, which is allowed and pulls the whole element outward. Remember that padding can only compress content inward, never extend it outward.
QDoes padding affect the background area?
AYes. The background-color is painted over the padding area, since padding is part of the box's background, but it does not extend into the margin area. More padding means a larger painted background, and increasing padding is the most direct way to enlarge a button's clickable area and make it look fuller. border-radius also clips the background within the padding area.
QWhat is the padding percentage relative to?
APercentage padding is always resolved against the containing block's width, including padding-top and padding-bottom, which are computed from width rather than height. This quirk powers the classic proportional-container trick, the padding-top hack: padding-top:56.25% (16:9) pushes out the height, which was the standard approach before aspect-ratio existed. It works because the percentage ignores height entirely and always refers back to the width.
QWhy does an element get bigger when I add padding?
ABecause with the default content-box, width covers only the content area, and padding and border are added on top of it, increasing the element's total footprint. Switching to box-sizing:border-box makes width include padding and border, so content shrinks inward and the total width stays the same. That is why border-box is recommended globally; without it, every element with padding is wider than the width you actually wrote.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
box-sizing Property
Control whether padding counts toward an element's total size.
margin (Margin Property)
Learn about the space outside an element.
