CSS padding

CSS padding is used to set the space between the HTML element tag border and its content. This is a single setting shorthand property to set the padding of the HTML element.

By using this property, padding from all sides can be given in a single setting.

Syntax

CSS padding values formats

There are different formats you can give the padding value

Single Value Format.
This will define the same value for all the sides. By using this you can give value for all the sides with just a single format.

Output

This is the HTML paragraph to show single padding in CSS

This will define 10px padding for all the sides.

Double Value Format

This will define the two value for all the sides. The first value is for top and bottom, the second value is for left and right. By using this you can give value for all the sides with two value format.

Output

The paragraph inside the div shows padding using two values.

This will define 10px padding for top and bottom and 20px for left and right.

Triple Value Format

This will define the three value for all the sides. The first value is for top, the second value is for left and right, the third is for bottom. By using this you can give value for all the sides with three value format.

Output

The paragraph shows padding with triple values format in CSS

This will define 10px padding for top, 20px for left and right and 10px for bottom.

Four Value Format

This will define the four value for all the sides. The first value is for top, second for right, third for bottom and fourth is for left. By using this you can give value for all the sides with four value format.

Output

The paragraph shows four values format of padding in CSS.

This will define 10px padding for top, 30px for right, 10px for bottom and 30px for left.