The padding property is a shorthand property to set the four padding properties: padding-top, padding-right, padding-bottom, and padding-left, in one declaration.
Every element on a web page is rectangular. Each element has a rectangular box model, which describes each of the rectangular boxes (areas) generated for the element: the content box, the padding box, the border box, and the margin box. The content box exists for every element. The padding, border, and margin boxes are optional, and their existence depends on whether you apply a padding, border, or margin to an element.
Trivia & Notes
The padding of an element is usually used to calculate the width and height of an element. The width is usually equal to the width of the content area (set using the width property) plus the width of the padding area. For example, if an element’s width is set to ‘300px’, and the width of its padding (left and right) sums up to ’60px’, then the total computed width of the element is ‘360px’, not ‘300px’. The same reasoning applies to the computed height of the element.
This calculation of the element’s height and width can change when the box-sizing property is used with a value of border-box. In that case, the padding width will be included in the width of the element, and so the width of the padding will be subtracted from the given width value of the element. For example, if the element’s width is set to ‘300px’ using the width property, and its padding width is set to ’60px’, then the total width will remain ‘300px’, and the width of the content area of the element will decrease from ‘300px’ to ‘240px’.
Using box-sizing: border-box; and is now the recommended practice in CSS.
You can read more about this in the box-sizing property entry. Also, see the demo section below for a live example.
Official Syntax
-
Syntax:
padding: [ <length> | <percentage> ]{1,4} - Initial: 0 0 0 0; which is the concatenation of each of its longhand properties
- Applies To: all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column
- Animatable: yes, each of the longhand properties is animatable as a length
Values
The unofficial syntax looks like the following:
padding: <padding> <padding>? <padding>? <padding>?
Each of the <padding> values corresponds to one of the four padding sides: top, right, bottom, and left, respectively.
The question mark (?) indicates that the value is optional. Some values are optional because the padding property can accept one, two, three, or four values. If four values are provided, the first one sets the top padding of the element, the second one sets the right padding, the third one sets the bottom padding, and the fourth one sets the left padding. If three values are provided, the first one sets the top padding, the second one sets the right and left padding, and the third one sets the bottom padding. If two values are provided, the first one sets the top and bottom padding, and the second one sets the right and left padding. If one value is provided, that value sets the fout padding sides (top, left, bottom, right).
Each padding can have one of the following values:
- <length>
- See the <length> entry for a list of possible values.
- <percentage>
- See the <percentage> entry for a list of possible values. A percentage value is calculated with respect to the width of the element’s containing block.
Notes
The padding can not be negative. An element can also inherit its padding value from its parent’s using the inherit keyword. For example:
.element {
padding: inherit;
}
Examples
The following sets the top padding of an element:
.container {
padding: 30px 20px;
}
.container-2 {
padding: 15% 10% 30%;
}
.sub-container {
padding: inherit;
}
.element {
padding: 30px;
}
.element-2 {
padding: 10px 20px 30px 60px;
}
Live Demo
View this demo on the Codrops PlaygroundBrowser Support
The padding property works in all major browsers: Chrome, Firefox, Safari, Opera, Internet Explorer, and on Android and iOS.
