CSS Lesson 7 of 12
CSS Padding
CSS padding adds space inside an element — between the content and its border. Learn padding-top, right, bottom, left, shorthand values, how padding extends backgrounds, and why box-sizing: border-box matters.
CSS Course
In This Lesson
- What is CSS Padding?
- The Box Model
- Basic Syntax
- Individual Sides
- Shorthand (1–4 values)
- Padding & Background
- Padding vs Margin
- box-sizing: border-box
- Common Mistakes
- Try It
- FAQ
Progress0/12
Padding is one of those things that looks simple but trips up beginners constantly. The most important thing to understand is that padding is inside the element — it fills with the background colour and is part of the clickable area. Once that clicks, layout becomes much clearer.
What You'll Learn
What CSS padding does
Where padding sits in the box model
padding-top / right / bottom / left
1, 2, 3, and 4-value shorthand
Padding vs margin — what's different
box-sizing: border-box fix
What is CSS Padding?
CSS padding creates space inside an element — between the element's content and its border. Think of it as the cushioning inside a box before you reach the content itself.
Padding is part of the CSS box model and makes elements feel less cramped and easier to read. Unlike margin (which pushes things away outside), padding is inside the element — so the background colour fills the padding area too.
Space Inside
Padding lives between the content and the border — it's internal breathing room for your element.
Fills with Background
Because padding is inside, the element's background colour extends through the padding area.
Clickable Area
Padding is part of the element — clicking anywhere inside the padding triggers click events.
Shorthand Ready
Set all four sides at once with the padding shorthand — from 1 to 4 values.
The CSS Box Model
Every HTML element is a rectangular box made of four layers. Padding is the layer between the content and the border:
Basic Padding Syntax
The padding property adds equal space on all four sides of an element. You can use pixels, em, rem, percentages, or any valid CSS length unit:
CSS — Basic Padding
/* Adds 20px padding on ALL four sides */ div { padding: 20px; } /* Works on any element */ p { padding: 15px; } button { padding: 10px; }
No padding:
Text inside
padding: 20px:
Text inside
Left: no padding — text touches border. Right: padding: 20px — breathing room inside.
Individual Side Properties
You can set padding on each side separately using four dedicated properties. Each one controls only that specific side:
padding-top
Space above the content
padding-right
Space to the right of content
padding-bottom
Space below the content
padding-left
Space to the left of content
CSS — Individual Side Padding
div { padding-top: 10px; /* top only */ padding-right: 40px; /* right only */ padding-bottom: 20px; /* bottom only */ padding-left: 30px; /* left only */ }
Padding Shorthand (1–4 Values)
Instead of writing four separate rules, use the padding shorthand. The number of values determines which sides they apply to:
One Value
padding: 25px;
All 4 sides equal — top, right, bottom, left all 25px
Two Values
padding: 20px 40px;
First = top & bottom. Second = left & right.
Three Values
padding: 10px 20px 30px;
Top · Left & Right · Bottom — each different.
Four Values
padding: 10px 20px 30px 40px;
Top · Right · Bottom · Left — clockwise order.
CSS — All Shorthand Variations
/* 1 value — all sides 25px */ div { padding: 25px; } /* 2 values — top&bottom=20px, left&right=40px */ div { padding: 20px 40px; } /* 3 values — top=10px, left&right=20px, bottom=30px */ div { padding: 10px 20px 30px; } /* 4 values — top=10, right=20, bottom=30, left=40 */ div { padding: 10px 20px 30px 40px; }
Memory trick for 4 values: Think clockwise from top — Top → Right → Bottom → Left. Or remember the word "TRouBLe" — T, R, B, L.
Padding and Background Colour
Padding extends the background area
Unlike margin, padding is inside the element — so the element's background colour fills the padding area too. This is why adding padding makes a coloured box appear bigger while keeping the background visible throughout.
CSS — Padding with Background
div { background-color: lightblue; padding: 30px; border: 2px solid navy; }
No padding:
Text content
padding: 30px:
Text content
Background colour extends through the padding area — the box grows but keeps its background colour.
Padding vs Margin
This is one of the most important distinctions in CSS layout. Both add space — but in different places:
Padding vs Margin Comparison
| Feature | Padding | Margin |
|---|---|---|
| Space location | Inside the border | Outside the border |
| Affects background | ✅ Yes — background fills padding | ❌ No — background stops at border |
| Purpose | Space between content and border | Space between this element and others |
| Clickable area | ✅ Padding area is clickable | ❌ Margin area is not clickable |
| Can be negative? | ❌ Cannot be negative | ✅ Can be negative |
CSS — Padding and Margin Together
div { margin: 20px; /* space OUTSIDE the box */ padding: 30px; /* space INSIDE the box */ border: 2px solid black; /* the box wall */ }
box-sizing: border-box
box-sizing: border-box — Stop padding from growing your element
By default, adding padding increases the total size of an element. A width: 300px div with padding: 20px actually renders as 340px wide. Setting box-sizing: border-box keeps the element at exactly its set width — padding is counted inside, not added on top.
CSS — box-sizing: border-box
/* Apply to ALL elements — recommended for every project */ * { box-sizing: border-box; } /* Without border-box: total width = 300 + 20 + 20 = 340px */ .no-bbox { width: 300px; padding: 20px; /* adds 40px! Total = 340px */ } /* With border-box: total width stays exactly 300px */ .with-bbox { box-sizing: border-box; width: 300px; padding: 20px; /* content shrinks, total stays 300px */ }
Best practice: Always add * { box-sizing: border-box; } at the top of every CSS file. It makes sizing predictable — elements stay the exact width you set regardless of padding added.
Common Mistakes
These are the errors beginners run into most often with CSS padding:
Confusing padding with margin
Padding is inside the element; margin is outside. Adding padding to create space between two separate elements won't work — you need margin for that. Always ask: "am I adding space inside this element or between elements?"
Padding is inside the element; margin is outside. Adding padding to create space between two separate elements won't work — you need margin for that. Always ask: "am I adding space inside this element or between elements?"
Forgetting that padding adds to the element's total size
A width: 200px element with padding: 20px is actually 240px wide unless you have box-sizing: border-box applied. This breaks layouts because your element is wider than expected. Fix it with * { box-sizing: border-box; }.
A width: 200px element with padding: 20px is actually 240px wide unless you have box-sizing: border-box applied. This breaks layouts because your element is wider than expected. Fix it with * { box-sizing: border-box; }.
Using negative padding values
Unlike margin, padding cannot be negative. Writing padding: -10px is invalid and browsers will ignore it completely. If you need to pull elements closer together, use negative margin instead.
Unlike margin, padding cannot be negative. Writing padding: -10px is invalid and browsers will ignore it completely. If you need to pull elements closer together, use negative margin instead.
Getting 4-value shorthand order wrong
The clockwise order is Top → Right → Bottom → Left. Beginners often write padding: 10px 20px 30px 40px expecting left-to-right or horizontal-vertical order. Use the "TRouBLe" trick to remember: T, R, B, L.
The clockwise order is Top → Right → Bottom → Left. Beginners often write padding: 10px 20px 30px 40px expecting left-to-right or horizontal-vertical order. Use the "TRouBLe" trick to remember: T, R, B, L.
Challenge — Experiment with Padding
1Create a <div> with a border and padding: 40px — observe the space between text and border
2Use the 4-value shorthand: padding: 10px 30px 20px 50px — check which side gets which value
3Add a background-color and confirm the background fills the padding area
4Create two identical divs — add margin: 20px to one and padding: 20px to the other — compare them visually
5Add * { box-sizing: border-box; } with a fixed width: 300px and padding: 30px — verify the total width stays 300px
Lesson Summary
PPadding = space inside the element, between content and border
4Four sides: padding-top padding-right padding-bottom padding-left
↻Shorthand 4-value order: Top → Right → Bottom → Left (clockwise)
🎨Background colour fills the padding area — margin does not
≠Margin = outside border · Padding = inside border — they are not the same
⊞box-sizing: border-box — padding doesn't grow the total element size
Questions About CSS Padding
The questions beginners ask most often about CSS padding:
What's the difference between padding and margin?
Padding is space inside the element between its content and its border. Margin is space outside the element between it and other elements. The key differences: padding inherits the element's background colour, padding is part of the clickable area, and padding cannot be negative. Margin has none of these characteristics. Use padding when you want to push content away from the edges of its own box. Use margin when you want to separate elements from each other.
Why does my element get bigger when I add padding?
By default, CSS uses box-sizing: content-box, which means padding is added on top of the width you set. A width: 300px element with padding: 20px on each side ends up 340px wide total. The fix is simple: add * { box-sizing: border-box; } at the top of your CSS. With border-box, padding is included inside the width — so the element stays exactly 300px and the content area shrinks to accommodate the padding instead.
What does the 2-value shorthand padding: 10px 20px mean?
When you use 2 values in the padding shorthand, the first value applies to top and bottom, and the second value applies to left and right. So padding: 10px 20px means 10px on the top and bottom, and 20px on the left and right. This is a common pattern for buttons and form inputs where you want more horizontal padding than vertical. If you need all four sides different, use the 4-value shorthand in clockwise order: Top, Right, Bottom, Left.
Can I use percentage values for padding?
Yes. Percentage padding is valid and commonly used — but there's a catch: both horizontal and vertical percentage padding are calculated based on the element's width, not its height. So padding: 10% on a 400px-wide element gives 40px on all four sides. This makes percentage padding useful for creating aspect-ratio-preserving boxes, but can produce unexpected results if you expect vertical padding to be relative to the element's height.
Does padding affect inline elements like <span>?
Yes, but with an important limitation. Horizontal padding (left and right) works normally on inline elements — it pushes content away horizontally and the background fills it. However, vertical padding (top and bottom) on inline elements does not push surrounding lines apart. It visually shows up but overlaps with adjacent lines instead of creating space between them. If you need vertical padding to affect layout on an inline element, change it to display: inline-block or display: block.
Should I use padding or gap for spacing inside flex containers?
Both serve different purposes. gap (or column-gap / row-gap) in a flex or grid container creates space between flex items — it doesn't add space on the outer edges. padding on the container adds space inside the container's border, creating space around all the items from the container edges. In practice: use gap for spacing between items, use padding on the container for breathing room from the container walls. They work together and are not mutually exclusive.