CSS Padding

CSS padding creates space between an element's content and its border.

Padding is part of the CSS box model and can be applied equally to all four sides or controlled separately for the top, right, bottom, and left sides. Unlike margins, padding is inside the element's border and the element's background is painted behind the padding area by default.

How Padding Works

Padding surrounds the content area and creates space between the content and the element's border.

.box {
  padding: 20px;
  border: 3px solid steelblue;
}

This adds 20px of padding on the top, right, bottom, and left sides of the content.

Padding cannot use negative values. A padding value of 0 places no padding on the specified side.

Individual Padding Sides

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

Property	Description
`padding-top`	Sets the padding above the content.
`padding-right`	Sets the padding to the right of the content.
`padding-bottom`	Sets the padding below the content.
`padding-left`	Sets the padding to the left of the content.

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

Each side can have a different amount of padding when the design requires uneven spacing.

The padding Shorthand Property

The padding shorthand property can set all four sides with a single declaration. The meaning of the values depends on how many values are supplied.

Values	Applied To
`padding: 20px;`	All four sides are 20px.
`padding: 10px 20px;`	Top and bottom are 10px; right and left are 20px.
`padding: 10px 20px 30px;`	Top is 10px; right and left are 20px; bottom is 30px.
`padding: 10px 20px 30px 40px;`	Top is 10px; right is 20px; bottom is 30px; left is 40px.

When four values are used, remember the clockwise order: top, right, bottom, left.

Padding Values

Padding commonly uses CSS length values such as px, em, and rem.

.pixels {
  padding: 20px;
}
.ems {
  padding: 1.5em;
}
.rems {
  padding: 2rem;
}

Relative units can be useful when the spacing should respond to font sizing rather than remain at a fixed CSS pixel value.

The keyword auto is not a valid padding value, and padding cannot be negative.

Percentage Padding

Padding can also use percentage values.

.box {
  padding: 5%;
}

Percentage padding is calculated from the width of the element's containing block. This applies to padding on all four sides, including the top and bottom.

Because percentage padding depends on the containing block's width, the amount of padding can change as the available width changes.

Padding and Box Size

With the default box-sizing: content-box, padding is added outside an element's declared width and height.

.box {
  width: 300px;
  padding: 20px;
}

The content area remains 300px wide. The left and right padding add another 40px, making the box 340px wide before any border is added.

300px content width
+ 20px left padding
+ 20px right padding
= 340px

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

Padding and Backgrounds

An element's background is painted behind its content and padding by default. This makes padding visually different from a margin, which is outside the border.

.box {
  padding: 30px;
  background-color: lightblue;
  border: 3px solid steelblue;
}

The light blue background extends from behind the content through the padding to the inside edge of the border.

Padding Example

The following example uses padding to create space between the text and the border of the box.

.box {
  padding: 30px;
  border: 3px solid steelblue;
  background-color: lightblue;
}

Open the example in the editor and change padding: 30px to values such as 10px, 50px, or 10px 40px. Run the example after each change to see how the space between the content and border changes.

Play in Editor