Skip to main content

CSS padding

The padding property is used to set the amount of space between an element's content and its border. It allows you to create space within an element, pushing the content away from its edges.

As an example:

/* all four sides */
div {
     padding: 10px;
}

/* top and bottom, left and right */
div {
     padding: 10px 20px;
}

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

In the first example:

  • All four sides of the div element will have a padding of 10px.

In the second example:

  • The top and bottom will have a padding of 10px, and the left and right will have a padding of 20px.

In the third example:

  • The top will have a padding of 10px, the right will have a padding of 20px, the bottom will have a padding of 30px, and the left will have a padding of 40px.

You can also set different padding values for different sides of an element using the individual padding properties.

As an example:

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

In this example:

  • The top will have a padding of 10px, the right will have a padding of 20px, the bottom will have a padding of 30px, and the left will have a padding of 40px.

Padding - Individual Sides​

You can set the padding for each individual side of an element using the following properties:

  • padding-top: sets the padding for the top side of the element.
  • padding-right: sets the padding for the right side of the element.
  • padding-bottom: sets the padding for the bottom side of the element.
  • padding-left: sets the padding for the left side of the element.

Here's an example of how to use these individual padding properties:

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

In this example:

  • We've set the padding-top and padding-bottom to 20px, and the padding-left and padding-right to 10px.
  • This will result in an element with more padding at the top and bottom, and less padding on the left and right.

Padding - Shorthand Property​

The padding shorthand property is used to set the padding for all four sides of an element at once. It allows you to set the same padding value for all sides, or different values for each side, using a single property.

As an example:

/* all four sides */
div {
     padding: 20px;
}

/* top and bottom, left and right */
div {
     padding: 10px 20px;
}

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

In the first example:

  • All four sides of the div element will have a padding of 20px.

In the second example:

  • The top and bottom will have a padding of 10px, and the left and right will have a padding of 20px.

In the third example:

  • The top will have a padding of 10px, the right will have a padding of 20px, the bottom will have a padding of 30px, and the left will have a padding of 40px.
tip

If you provide only one value for the padding property, it will be applied to all four sides. If you provide two values, they will be applied to the top/bottom and left/right sides, respectively. If you provide three values, they will be applied to the top, left/right, and bottom sides, respectively. And if you provide four values, they will be applied to the top, right, bottom, and left sides, respectively.