🎓 A1Learner
🔍

CSS Padding

Padding is space inside an element's border, around its content. The padding properties set that space on each side.

Add inside space

Two longhand properties add space inside the box. The content moves away from the top and left edges.

.box {
  padding-top: 20px;
  padding-left: 16px;
}

The two-value shorthand

The first value sets the top and bottom sides. The second value sets the left and right sides.

.box {
  padding: 10px 30px;
}

Padding takes the background

The background colour fills the padding area. The colour reaches right up to the inside of the border area.

.box {
  background-color: lightblue;
  padding: 24px;
}

Example

h1 {
  color: white;
  background-color: blue;
  padding: 12px;
}
.box {
  background-color: lightyellow;
  padding: 20px 30px;
}
button {
  padding: 8px 16px;
}

Key points

  • padding-top, padding-right, padding-bottom and padding-left set the four sides.
  • The two-value shorthand sets the vertical sides first and the horizontal sides second.
  • The background colour paints the padding area too.
  • Padding never collapses between neighbouring elements.
  • Padding values cannot be negative.
  • Margin sits outside the border and padding sits inside it.

In this example, the heading gains padding on all four sides, and its blue background fills that space. The box uses the two-value shorthand for wider side padding. Its light yellow background fills the padding too. The button gains small padding around its label.

Try it Yourself

Edit the code, then press Run.

Runs in your browser — the preview under the editor is the real result. Nothing is sent to a server. The code runner panel (right) does the same with more room.

Exercise

Where does padding sit?