CSS padding

The CSS padding property is CSS shorthand for specifying padding on all sides of an element.

In other words, the padding property is shorthand property for setting padding-top, padding-right, padding-bottom, and padding-left all at once.

Syntax

padding: [ <length> | <percentage> ]{1,4}

These values are explained below.

Possible Values

length
Allows you to specify a non-negative length value as the padding thickness. Negative values are invalid.
percentage
Allows you to specify a non-negative percentage value as the padding thickness. Negative values are invalid.

You can include these values between one to four times. If you supply only one value, it applies to all sides. If you provide two values, the top and bottom paddings are set to the first value and the right and left paddings are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values, they apply to the top, right, bottom, and left, respectively.

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial
Represents the value specified as the property's initial value.
inherit
Represents the computed value of the property on the element's parent.
unset
This value acts as either inherit or initial, depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

General Information

Initial Value

Depends on the value of each individual padding property (i.e. padding-top, padding-right, padding-bottom, and padding-left).

The initial value for these properties is 0.

Applies To

CSS3 states that this property applies to all elements. However, CSS2 states all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column.

Inherited?
No
Media
Visual
Animatable
Yes (see example)

Example Code

/* All four sides have padding of 10 pixels. */
padding: 10px;

/* 
Top and bottom have padding of 10 pixels.
Right and left have padding of 20 pixels. 
*/
padding: 10px 20px;

/*
Top is 10 pixels
Left and right are 20 pixels
Bottom is 30 pixels
*/
padding: 10px 20px 30px;

/* 
Top is 10 pixels
Right is 20 pixels
Bottom is 30 pixels
Left is 40 pixels 
*/
padding: 10px 20px 30px 40px;

Official Specifications