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.
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.
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 two values - x1 y1
In here each value denotes, x1 : top and bottom padding, y1 : right and left padding.
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 one value - x1
In here each value denotes, x1 : all four (top, right, bottom, left) paddings.
In the above example values used in border-top property are,
60px - padding-top, padding-bottom, padding-right and padding-left