Padding in CSS - Add Inner Space Around Content Like a Pro
After understanding the Box Model, the first layer we usually work with is Padding. It is the inner space that keeps text or images from touching the element border.
If you are looking for what padding is in CSS, how to use padding shorthand, or the difference between padding and margin, this lesson explains it clearly.
What Is Padding in CSS?
Padding is the space inside the element, between the content and the border. It increases inner breathing room and makes layouts more comfortable visually.
Simple definition: Padding in CSS = inner spacing around the content inside the same box.
Individual Padding Properties in CSS
You can control each side separately:
padding-toppadding-rightpadding-bottompadding-left
.card {
padding-top: 20px;
padding-right: 40px;
padding-bottom: 20px;
padding-left: 40px;
}
What does this code do? It adds more space left and right than top and bottom.
Expected result: content sits comfortably in the middle of the card.
Common mistake: forgetting one side and wondering why spacing feels uneven.
Result in the browser:
Padding Shorthand in CSS
Instead of four lines, you can use one shorthand line. The order is always: Top -> Right -> Bottom -> Left (clockwise).
1) Four values
padding: 10px 20px 30px 40px;
What does it mean? Top 10, right 20, bottom 30, left 40.
2) Three values
padding: 10px 20px 30px;
What does it mean? Top 10, left/right 20, bottom 30.
3) Two values
padding: 10px 20px;
What does it mean? Top/bottom 10, left/right 20.
4) One value
padding: 16px;
What does it mean? 16px on all sides.
Result in the browser: no padding
Result in the browser: padding: 20px
Does Padding Affect Element Size in CSS?
Yes. In the default content-box model, adding padding increases the total size of the element.
.box {
width: 200px;
padding: 20px;
}
Horizontal calculation: 200 + 20 + 20 = 240px (without border/margin).
Common mistake: expecting the box to stay 200px wide after adding padding.
box-sizing: border-box; to make sizing with padding easier.
Padding vs Margin in CSS
| Property | Where the Space Is | Uses Background? | Allows Negative? |
|---|---|---|---|
padding |
Inside the element | Yes | No |
margin |
Outside the element | No | Yes |
Common Mistakes with Padding in CSS
1) Using very large values: breaks layouts on small screens.
2) Relying on padding instead of margin between elements: creates unexpected spacing.
3) Forgetting shorthand order: results in swapped sides.
FAQ - Common Search Questions
What is padding in CSS?
It is the inner space between content and the element border.
How do I use padding shorthand in CSS?
Order is: top, right, bottom, left. Example: padding: 10px 20px 30px 40px;.
Can padding be negative in CSS?
No, padding does not accept negative values.
What is the difference between padding and margin in CSS?
Padding is inside the element, margin is outside between elements.
Why did my element grow after adding padding in CSS?
Because padding is added to the total size in content-box.
padding: 20px, and watch how the size and feel change.