CSS padding Property
The padding property is a shorthand property for setting the padding for all four sides of an element in one declaration, padding being the space between the element border and the element content. For an explanation of the relationship between padding, margins, borders and element content please have a look at the CSS Box Model page.
Possible Values
- A length value:
- em - relative unit - the width of the 'font-size' of the font in use.
- ex - relative unit - the height of the letter 'x' in the current font.
- in - absolute unit - inches.
- mm - absolute unit - millimeters.
- cm - absolute unit - centimeters.
- pt - absolute unit - points - a point is 1/72nd of an inch.
- pc - absolute unit - picas - one pica = 12 pt.
- px - absolute unit - pixel - one pixel = 0.75 pt.
- a percentage - in relation to the width of the block that contains the box.
The padding property can be used on all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column.
Code Example
p{padding: 2em;}
The padding property can have from one to four values:
- When one value is given all four sides have the same padding.
- When two values are given the top and bottom are given the first value and the right and left sides share the second value.
- When three values are set the top is given the first value, the left and right sides share the second and the bottom is set to the third.
- With four values the padding is set in the following order: top, right, bottom and left.
Below are some examples of the padding property being applied to a paragraph of text within a
<div> element. The <div> has a width of 50%
and a background-color has been added to illustrate the results of the padding
declaration.
p {padding: 2em;} - same padding applied to all four sides.
Only one value is given so it is applied to all four sides of the element.
p {padding: 2em 25%} - top and bottom padding is 2em, left and right
padding is 25%
Two values are given so top and bottom take the first value and left and right take the second.
p {padding: 2em 0 4em;} - padding at the top set to 2em,
left and right have no padding and the bottom has a value of 4em.
The first value applies to the top, second value given to the left and right, third value given to the bottom.
p {padding: 10px 20px 30px 40px;} - four values are given so padding applied in the order top,
right, bottom and finally left.
With four values given they are set clockwise around the element starting with the top.