CSS Padding

Padding in CSS is the term given to the inner space of an element around its content. CSS allows you to control all the padding of an element; top, bottom, left and right.

The corresponding properties for each side are:
A general example for the padding can be:

The values allowed for these properties are:

Length values

The values given in the above example come under this category. Along with px we can also give the length in pt, cm etc.


The padding is given in percentage of the width of the containing element. For example:

Here, the 5% of the horizontal space will be acquired by top and bottom padding and similarly case for horizontal space by left and right.


Inherits the padding from the parent element. Example:

Here, the div that belongs to class ex2 will inherit the top padding from its containing element. Therefore if it is contained inside another div of class ex1, the top padding would be 10px.


The shorthand order for padding is:
But here are some interesting cases that you must know.
In general, if you give all the four values, the above sequence will be followed. Therefore, if

Here, top is 20px right is 40px and so on.

In case you give only 3 values, then the first and last values go to top and bottom paddings. The right and left paddings take the middle value each. Example:

So, left and right paddings are 40 px each.

In case of two values, the first value is taken by top and bottom paddings and the second value is for left and right ones.

In case of a single padding value, all the four paddings take that same single value

Another interesting feature about Padding is with the element width. The width of the element is gets rendered as the sum of the actual specified width along with the horizontal margin, horizontal padding and borders. Therefore if following is the case:

The total width would be 240 (i.e. 200+20 for left + 20 for right).

To avoid this and retain the specified width, we use the box-sizing property as:

In this case, the width is retained. Althoug, the content space for the element will change as per the left and right padding.