Padding

CSS Padding

CSS padding creates space inside an element between its content and border. Padding can be applied equally to every side or controlled separately for the top, right, bottom, and left sides.

The padding Property

The CSS padding property creates space between an element's content and its border. If no border is visible, padding still creates space around the content inside the element.

div {
  padding: 20px;
}

This example adds 20 pixels of padding to all four sides of the content.

Padding on Individual Sides

CSS provides four properties for controlling padding on individual sides of an element.

div {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 40px;
}

The padding-top, padding-right, padding-bottom, and padding-left properties make it possible to give each side a different amount of space.

Padding Shorthand

The padding shorthand property can set the padding for all four sides in a single declaration. Depending on the number of values provided, CSS distributes the values among the four sides in different ways.

div {
  padding: 10px 20px 30px 40px;
}

When four values are used, they are applied clockwise in the order top, right, bottom, and left.

One Padding Value

When one value is provided, the same padding is applied to all four sides.

div {
  padding: 20px;
}

This applies 20 pixels of padding to the top, right, bottom, and left.

Two Padding Values

When two values are provided, the first value applies to the top and bottom, while the second applies to the left and right.

div {
  padding: 10px 20px;
}

This creates 10 pixels of vertical padding and 20 pixels of horizontal padding.

Three Padding Values

When three values are provided, the first applies to the top, the second applies to the left and right, and the third applies to the bottom.

div {
  padding: 10px 20px 30px;
}

This creates 10 pixels of top padding, 20 pixels of left and right padding, and 30 pixels of bottom padding.

Four Padding Values

When four values are provided, each value controls one side in clockwise order: top, right, bottom, and left.

div {
  padding: 10px 20px 30px 40px;
}

A useful way to remember the order is to start at the top and move clockwise around the box.

Padding Units

Padding accepts non-negative CSS length values, including units such as px, em, and rem.

.pixels {
  padding: 20px;
}

.relative {
  padding: 1.5em;
}

Pixel values provide a fixed CSS length, while em and rem values scale according to font-size values.

Unlike margins, padding cannot use negative values.

Percentage Padding

Padding can also use percentages. Percentage padding is calculated relative to the inline size of the element's containing block, which in normal horizontal writing is usually its width.

div {
  padding: 5%;
}

This means that percentage values used for top and bottom padding are also normally based on the containing block's width rather than its height.

Padding and Box Size

With the default box-sizing: content-box;, padding is added outside a declared content width and height. This increases the size of the element's border box.

div {
  width: 300px;
  padding: 20px;
}

The 300-pixel width applies to the content area. The left and right padding add another 40 pixels, producing a 340-pixel padding-box width before any borders are added.

300px content width
+ 40px horizontal padding
= 340px padding-box width

When box-sizing: border-box; is used, padding is included within the declared width instead. Box Sizing is covered later in this section.

Padding and Backgrounds

An element's background normally extends behind its padding. This makes padding useful for creating visible space around content inside a colored or decorated element.

div {
  padding: 20px;
  background-color: #eeeeee;
}

Try Different Padding Values

Edit the padding values in the example to see how changing each side affects the space between the content and the border.

Summary

CSS padding creates space between an element's content and its border. Padding can be controlled separately on each side or with the padding shorthand property. It accepts non-negative lengths and percentages, contributes to box size, and normally displays the element's background behind it.

The next tutorial covers Borders and how CSS controls the lines surrounding an element's padding and content.