What is padding property of css.

Explained what is padding property of CSS.

Padding is used to provide unified space around the content of the element and between its border.

It is a shorthand for four different properties padding-left, padding-right, padding-top, padding-bottom.

It accepts positive value only in px, pt, em, rem, %, etc.

When we provide only single value it sets the value for all the directions.

//Sets single value for all directions
div{
 padding: 10px;
}

or

//Sets separate value for all directions
div{
 padding: 10px 20px 30px 40px;
}

We can also set individual value for all the direction in the single line.

Following is the direction order of setting the padding. It goes in the cyclic order like starting from the top, right, bottom, left.

If we only provide three values then it will set the first value on top, second value to the left and right, third value to the bottom.

div{
 padding: 10px 20px 30px;
}

If there are only two values then the first value will be for the top and bottom area and the second value is for the left and right.

div{
 padding: 10px 20px;
}

We can also set the value for each direction individually.

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

Padding and width of the element in css

The width property specifies the width of the content area of the element. When we provide the padding to element it is added between the content and border.

So in the box model the padding is added to the actual width and height.