Padding – CSS

Demo

Summary

To change the padding of an element using CSS, use the padding-top, padding-right, padding-bottom, and padding-left properties:

selector {
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
}

You can also use the padding property, which combines the four properties from above into one:

selector {
  padding: 10px 10px 10px 10px;
}

Details

The padding properties increase or decrease the space around the content of the element inside the border. This is different than the margin properties, which increase or decrease the space outside of an element’s border. (Note: An element does not need to have a border set for the padding or margin properties to have an effect.)

All of the padding properties take length values.

padding

For the padding property, the order and number of values matters. It can have anywhere between one to four values.

One value applies to all four sides of the element(s):

selector {
  padding: 10px; /* All 4 sides */
}

With two values, the first value applies to the top and bottom and the second applies to the right and left:

selector {
  padding: 10px 20px; /* top, bottom | right, left */
}

With three values, the first value applies to the top, the second applies to the right and left sides, and the third value applies to the bottom:

selector {
  padding: 10px 20px 30px; /* top | right, left | bottom */
}

With four values, the first value applies to the top, the second to the right, the third to the bottom, and the fourth to the left:

selector {
  padding: 10px 20px 30px 40px; /* top | right | bottom | left */
}

Exercises

First, recreate the CSS code from the Demo section in your CSS file. Then try changing the values for the properties.

References

padding property on MDN

Shorthand margin and padding properties on MDN

Back to: CSS Reference > CSS Properties