CSS Padding

CSS padding is a shorthand property that defines the space between the element's border and its content, that is, the top and bottom left and right padding.


When the padding padding of an element is cleared, the released area will be filled with the element's background color.

Using the padding property alone can change the top, bottom, left, and right padding.

value Description
length Define a fixed padding (pixel, pt, em, etc.)
% Use a percentage value to define a padding

In CSS, it can specify different padding for different sides:


p {
    padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;
Try it yourself »

Padding attribute, which can have one to four values.

  padding:25px 50px 75px 100px;

  • Up to 25px
  • Right padding is 50px
  • Fill down to 75px
  • Left padding is 100px

  padding:25px 50px 75px;

  • Up to 25px
  • Left and right padding is 50px
  • Fill down to 75px

  padding:25px 50px;

  • Padding up and down to 25px
  • Left and right padding is 50px


  • All padding is 25px

All CSS Padding Properties

Property Description
padding Use shorthand properties to set all padding properties in one declaration.
padding-bottom Set the element's bottom
padding-left Set the left padding of an element.
padding-right Set the right padding of an element
padding-top Set the top padding of an element.