CSS `padding` Property

Description

The padding CSS property sets the padding on all four sides of the element. It is a shorthand property for padding-top, padding-right, padding-bottom, and padding-left property.

The following table summarizes the usages context and the version history of this property.

Default value:	`0`
Applies to:	All elements except `<tbody>`, `<thead>`, `<tfoot>`, `<tr>`, `<colgroup>` and `<col>`. It also applies to `::first-letter`.
Inherited:	No
Animatable:	Yes. See animatable properties.
Version:	CSS 1, 2, 3

The syntax of the property is given with:

padding:

[ length | percentage] ^{1 to 4 values} | initial | inherit

The example below shows the padding property in action.

p.one {
    padding: 20px;
}
p.two {
    padding: 35px 15px;
}

This shorthand notation can take one, two, three, or four whitespace separated values.

If one value is set, this padding applies to all 4 sides.
If two values are set, the first value applies to top and bottom, the second value applies to the right and left side.
Three values apply to the top, horizontal (i.e. right and left) and bottom side.
Four values apply to the top, right, bottom, left side in that order.

The following table describes the values of this property.

Value	Description
`padding-top`	Sets the padding to the top side of an element.
`padding-right`	Sets the padding to the right side of an element.
`padding-bottom`	Sets the padding to the bottom side of an element.
`padding-left`	Sets the padding to the left side of an element.
`initial`	Sets this property to its default value.
`inherit`	If specified, the associated element takes the computed value of its parent element `padding` property.

The padding property is supported in all major modern browsers.