CSS Padding: Explained With 4 Online Examples

The padding property of CSS

The padding and margin properties add spaces in the specified HTML elements. The CSS padding property adds space between the content and border of the specified HTML element.

See a padding example by single declaration

To set the padding of HTML elements, you can use the padding property with one value to apply in all directions. That means the space between the content of the element and its border will be applied equally in the left, right, top and bottom.

This method would be referred as shorthand or defining padding by single declaration.

A padding example with separate declaration

Alternatively, you may use the padding property individually for each direction. The syntax and examples of using padding in both ways are given below, so keep reading.

How to define CSS padding

The basic syntax of padding is:

padding: 10px;

Where 10px is the length value that can be in px, pt, cm etc.

The padding can also be set individually for each direction as given below:

padding-left: 10px;

padding-right: 10pts;

padding-top: 2cm;

padding-bottom: 10px

Set padding with single value example

This example uses the padding CSS property in a div element with the single value. This single value will add space equally in all directions i.e top, bottom, right and left. See the demo by clicking the link or image:

CSS-padding

Experience this example online

Add padding with four values example

This example uses four values to define the padding.

The padding order is:

  1. The first value defines the top.
  2. The second is right.
  3. The third is the bottom.
  4. The fourth value defines the left padding.

CSS-padding single declaration

Experience this example online

Using shorthand padding property to change padding with two values

If you specify only two values then the CSS padding order will be:

  • The first value will define padding for top and bottom.
  • While the second value will define padding for left and right.

See the example of padding with two values:

Experience this example online

A padding-top and padding-left properties example

Instead of using the shorthand padding property, you can use the individual property for each direction. The example below shows how to use the padding-top and padding-left properties to define spaces in a div element.

Experience this example online

In the same way, you can use the padding-right and padding-bottom properties to define the padding of elements.