CSS padding property

CSS padding

CSS padding is a short hand property, used to add space between the content and its border.

In padding extra space is added within the element.

It consists of following shorthand properties

  • padding-top : It is used to set space on top of the element.
  • padding-right : It is used to set space on right of the element.
  • padding-bottom : It is used to set space on bottom of the element.
  • padding-left : It is used to set space on left of the element.

padding with four values - x1 y1 x2 y2

In here each value denotes, x1 : top padding, y1 : right padding, x2 : bottom padding, y2 : left padding.

Example 1 - x1 y1 x2 y2

Try Yourself

In the above example values used in border-top property are,

0px - padding-top

20px - padding-right

5px - padding-bottom

60px - padding-left


padding with three values - x1 y1 x2

In here each value denotes, x1 : top padding, y1 : right and left padding, x2 : bottom padding.

Example 2 - x1 y1 x2

Try Yourself

In the above example values used in border-top property are,

0px - padding-top

20px - padding-right and padding-left

5px - padding-bottom


padding with three values - x1 y1

In here each value denotes, x1 : top and bottom padding, y1 : right and left padding.

Example 3 - x1 y1

Try Yourself

In the above example values used in border-top property are,

0px - padding-top and padding-bottom

20px - padding-right and padding-left


padding with three values - x1

In here each value denotes, x1 : all four (top, right, bottom, left) paddings.

Example 4 - x1

Try Yourself

In the above example values used in border-top property are,

60px - padding-top, padding-bottom, padding-right and padding-left