CSS Property: padding
The padding of a box, inside the margin and border areas, and outside the content area.
With one value, the padding
property can be used to specify uniform padding around a box. With two, three, or four values, sides can be specified independently.
Possible Values
Value | Note | Example |
---|---|---|
[length] | Should not be a negative value. | 10px |
[percentage] | Calculated as a percentage of the containing box’s width. Should not be a negative value. | 25% |
inherit | ||
initial | ||
unset |
Multiple Values
One, two, three, or four space-separated values:
Value | Note | Example |
---|---|---|
[value] | [top, right, bottom, and left] | 10px |
[value] [value] | [top and bottom] [left and right] | 10px 20px |
[value] [value] [value] | [top] [right and left] [bottom] | 10px 20px 30px |
[value] [value] [value] [value] | [top] [right] [bottom] [left] | 10px 20px 30px 40px |
Example
#gull { padding: 12px; }
/* Uniform padding of 12px on all four sides */
#swan { padding: 20% 40%; }
/* Top and bottom padding are each 20% of the containing box's width. Left and right padding are each 20% of the containing box's width. */
#tern { padding: 20% inherit 2.5em; }
/* Top padding is 20% of the containing box's width. Left and right padding are inherited. Bottom padding is 2.5em */
#grebe { padding: 10px 20px 30px 40px; }
/* Top padding is 10px. Right padding is 20px. Bottom padding is 30px. Left padding is 40px. */