CSS Padding

The css padding properties are used to generate space around content. The padding property allows you to specify how much space should appear between the content of an element and its border.This property used its value as a length, a percentage, or the word inherit. If the value is inherited from the parent element, it will have the same padding as its parent element.The following are the properties to control the padding of on the each side of the box.

  • Padding-bottom : It specifies the bottom padding of an element.
  • Padding-left : It specifies the left side padding of an element.
  • Padding-right : It specifies the right side padding of an element.
  • Padding This padding is used as shorthand for preceding properties.

The padding-bottom Property

The padding-bottom property is used to set the bottom space of an element. This can take a value in terms of length of %.


Output :

The paragraph with a specified bottom padding.

The paragraph with a specified bottom padding in percent.

The padding-Top Property

The padding-top property is used to set the top space of an element. This can take a value in terms of length of %.


Output :

The paragraph with a specified top padding.

The paragraph with a specified top padding in percent.


The padding-Left Property

The padding-left property is used to set the left space of an element. This can take a value in terms of length of %.


Output :

The paragraph with a specified left padding.

The paragraph with a specified left padding in percent.


The padding-Right Property

The padding-right property is used to set the right space of an element. This can take a value in terms of length of %.


Output :

The paragraph with a specified right padding.The paragraph with a specified right padding.The paragraph with a specified right padding.The paragraph with a specified right padding.The paragraph with a specified right padding.

The paragraph with a specified right padding in percent.The paragraph with a specified right padding in percent.The paragraph with a specified right padding in percent.The paragraph with a specified right padding in percent.The paragraph with a specified right padding in percent.

Padding - Shorthand Property

If user want to shorten the code then this property is used in one property. The padding property has the following types.

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left
Example of shorthand property : Output :
This div element has a top padding of 60px, a right padding of 30px, a bottom padding of 60px, and a left padding of 70px.

The working of shorthand property

If the padding property has only one value

  • Padding : 25px;
    • All four padding are 25 px;

If the padding property has two values

  • Padding : 25px 50px;
    • Top and bottom paddings are 25 px;
    • Rightand left paddings are 50 px;

If the padding property has four values

  • Padding : 25px 50px 70px 100px;
    • Top padding is 25px;
    • Right padding is 50px;
    • Bottom padding is 70px;
    • Left padding is 100px;
Output :

Using the padding shorthand property

This div element has a top, right, bottom and left paddding of 25px.

This div element has a top and bottom padding of 25px, and a left and right padding of 50px.

This div element has a top padding of 25px, a left and right padding of 50px, and a bottom padding of 75px.

This div element has a top padding of 25px, a right padding of 50px, a bottom padding of 75px and a left padding of 100px.


Example

Try It Yourself