CSS Padding
In this page:
What Is Padding?
Padding is the space between an element's content and its border, sitting inside the element rather than outside it like margin does. Padding also increases an element's total rendered size unless you're using box-sizing: border-box.
Note: If an element has a background color, padding is the area where that background shows around the content, right up to the border.
Warning: Removing all padding can make text or icons feel cramped right up against an element's edge or border.
Example: What Is Padding?
<style>
.box {
background: lightblue;
padding: 20px;
}
</style>
<div class="box">Padding sits inside the element, around the content</div>Setting Padding on All Sides
Writing padding with a single value applies that exact amount of inner space to all four sides of an element at once. Just like margin's single-value shorthand, this applies identically to top, right, bottom, and left in one line.
Note: A single-value padding declaration is the quickest way to give a card or button consistent breathing room on every side.
Warning: A single padding value affects all sides equally, which may add more horizontal space than you actually wanted on a wide element.
Example: Setting Padding on All Sides
<style>
.box {
padding: 20px;
background: lightblue;
}
</style>
<div class="box">Uniform padding on all four sides</div>Individual Padding Sides
padding-top, padding-right, padding-bottom, and padding-left let you control the inner spacing on just one side of an element, independent of the others. Unlike margin, padding never collapses between elements, since it's part of the element's own box rather than space outside it.
Note: Individual padding sides are useful when a component needs asymmetric spacing, like extra left padding to make room for an icon.
Warning: It's easy to set one side's padding and forget the others still default to whatever was inherited or previously set.
Example: Individual Padding Sides
<style>
.box {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;
background: lightblue;
}
</style>
<div class="box">Different padding per side</div>Padding Shorthand
The padding shorthand works exactly like margin's: up to four values in the order top, right, bottom, left, with two values setting vertical and horizontal padding together. Two values apply to vertical and horizontal padding respectively, while four values go clockwise starting from the top.
Note: The same TRouBLe memory trick from margin (top, right, bottom, left) applies here too.
Warning: As with margin, the number of values you pass changes their meaning, double check whether you meant two values or four.
Example: Padding Shorthand
<style>
.box {
padding: 10px 20px 30px 40px;
background: lightblue;
}
</style>
<div class="box">top right bottom left</div>Padding and the Box Model
By default, padding adds to an element's total rendered width and height, on top of whatever width or height you set. box-sizing: border-box changes this, so padding is included inside the width you specify instead.
Note: Many developers set box-sizing: border-box globally at the start of a project, it makes width and padding much more predictable together.
Warning: Without border-box sizing, adding padding to an element with a fixed width can make it visually larger than you expected.
Example: Padding and the Box Model
<style>
.box {
width: 200px;
padding: 20px;
box-sizing: border-box;
background: lightblue;
}
</style>
<div class="box">Padding included inside the 200px width</div>- Confusing padding (space inside the border) with margin (space outside the border).
- Forgetting that padding adds to an element's total rendered size unless box-sizing: border-box is used.
- Using inconsistent padding values across similar components, which makes a design feel unpolished.
- Padding is the space between an element's content and its own border.
- Padding can be set on all sides at once, on individual sides, or with a shorthand property.
- By default, padding adds to an element's total size; box-sizing: border-box changes that behavior.
All standard CSS padding properties covered here are supported by every modern browser.
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: