CSS Padding

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.

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.

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.

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 sets all four sides in one declaration, and the number of values decides how they are applied. One value sets all four sides. Two values set top and bottom first, then left and right. Three values set top, then left and right together, then bottom. Four values go clockwise, starting from the top: top, right, bottom, left.

Padding also accepts percentages, such as padding: 5%. A percentage is calculated from the width of the parent (containing) block, even for top and bottom padding. Use padding: 0 to remove all padding from an element.

Example: Padding Shorthand

<style>
.one { padding: 20px; background: #def; }
.two { padding: 10px 30px; background: #fde; }
.three { padding: 5px 20px 15px; background: #dfd; }
.four { padding: 5px 10px 15px 20px; background: #ffd; }
</style>
<div class="one">1 value — all sides 20px</div>
<div class="two">2 values — top/bottom 10px, left/right 30px</div>
<div class="three">3 values — top 5px, sides 20px, bottom 15px</div>
<div class="four">4 values — top 5px, right 10px, bottom 15px, left 20px</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.

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>