Web Standards Programmer's Reference: HTML, CSS, JavaScript®, Perl, Python®, and PHP

15.2. Element Padding

An element's padding defines the space between the element and the space its border would occupy. This space can be increased or decreased, or set to an absolute value, using the following padding properties:

• padding-top

• padding-right

• padding-left

• adding-bottom

• padding

The first four properties are predictable in their behavior; for example, padding-top will change the padding on the top of the element, padding-right will change the padding on the right side of the element, and so forth. The fifth property, padding, is a shortcut for all sides; its effect is determined by the number of values provided, as explained in the following table.

Number of Values	The Effect of the Values
One	All sides are set to the value provided.
Two	The top and bottom are set to the first value provided; the left and right are set to the second value provided.
Three	The top is set to the first value provided, the left and right are set to the second value provided, and the bottom is set to the third value provided.
Four	The top is set to the first value provided, the right is set to the second value provided, the bottom is set to the third value provided, and the left is set to the fourth value provided. (In this case, the values are applied in a clockwise order around the element, starting with the top.)

For example, the following style will set the top and bottom padding value to 5 pixels and the right and left padding to 10 pixels:

padding:  5px 10px;

Although changing an element's padding ...