CSS padding property

Padding is the property that is used to set the amount of space between the contents of an element and its border. The values that can be set for this property can be in terms of length or percentage. Percentage value refers to width of the parent element. Negative values are not permitted. For example:

P{border-style : solid;  Padding : 30px;  }

On specifying, it will set a solid border around <p> element in your webpage such that the amount of space between the contents of an element and its border will be 30 pixels.

You can also set the space between the contents and the top, right, left and bottom sides using PADDING-TOP, PADDING-RIGHT, PADDING-LEFT and PADDING-BOTTOM properties respectively. For example:

P{border-style : solid;  Padding-top : 10px;  Padding-left : 30px;  }

Padding is a shorthand property for PADDING-TOP, PADDING-RIGHT, PADDING-BOTTOM and PADDING-LEFT properties. You can also set the padding for Top, Right, bottom and left sides in a single statement. The order in which these specified values will appear are padding values for top, right, bottom and left sides. For example:

P {border-style : solid;  Padding : 10px 0 0 30px;  }

If two or three values are given then the omitted values are taken from the opposite side. If only two values are given then the top and bottom padding takes on the first value and right and left padding are set to second. If three values are given then the top padding is set to first value, right and left padding are set to second and the bottom padding is set to the third value.