padding
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
ThepaddingCSSshorthand property sets thepadding area on all four sides of an element at once.
Try it
padding: 1em;padding: 10% 0;padding: 10px 50px 20px;padding: 10px 50px 30px 0;padding: 0;<section> <div> <div> Far out in the uncharted backwaters of the unfashionable end of the western spiral arm of the Galaxy lies a small unregarded yellow sun. </div> </div></section>#example-element { border: 10px solid #ffc129; overflow: hidden; text-align: left;}.box { border: dashed 1px;}An element's padding area is the space between its content and its border.
Note:Padding creates extra space within an element. In contrast,margin creates extra spacearound an element.
Constituent properties
This property is a shorthand for the following CSS properties:
Syntax
/* Apply to all four sides */padding: 1em;/* top and bottom | left and right */padding: 5% 10%;/* top | left and right | bottom */padding: 1em 2em 2em;/* top | right | bottom | left */padding: 5px 1em 0 2em;/* Global values */padding: inherit;padding: initial;padding: revert;padding: revert-layer;padding: unset;Thepadding property may be specified using one, two, three, or four values. Each value is a<length> or a<percentage>. Negative values are invalid.
- Whenone value is specified, it applies the same padding toall four sides.
- Whentwo values are specified, the first padding applies to thetop and bottom, the second to theleft and right.
- Whenthree values are specified, the first padding applies to thetop, the second to theright and left, the third to thebottom.
- Whenfour values are specified, the paddings apply to thetop,right,bottom, andleft in that order (clockwise).
Values
<length>The size of the padding as a fixed value.
<percentage>The size of the padding as a percentage, relative to the inline size (width in a horizontal language, defined by
writing-mode) of thecontaining block.
Formal definition
| Initial value | as each of the properties of the shorthand: |
|---|---|
| Applies to | all elements, excepttable-row-group,table-header-group,table-footer-group,table-row,table-column-group andtable-column. It also applies to::first-letter and::first-line. |
| Inherited | no |
| Percentages | refer to the width of the containing block |
| Computed value | as each of the properties of the shorthand:
|
| Animation type | alength |
Formal syntax
padding =
<'padding-top'>{1,4}
<padding-top> =
<length-percentage [0,∞]>
<length-percentage> =
<length>|
<percentage>
Examples
Setting padding with pixels
HTML
<h4>This element has moderate padding.</h4><h3>The padding is huge in this element!</h3>CSS
h4 { background-color: lime; padding: 20px 50px;}h3 { background-color: cyan; padding: 110px 50px 50px 110px;}Result
Setting padding with pixels and percentages
padding: 5%; /* All sides: 5% padding */padding: 10px; /* All sides: 10px padding */padding: 10px 20px; /* top and bottom: 10px padding *//* left and right: 20px padding */padding: 10px 3% 20px; /* top: 10px padding *//* left and right: 3% padding *//* bottom: 20px padding */padding: 1em 3px 30px 5px; /* top: 1em padding *//* right: 3px padding *//* bottom: 30px padding *//* left: 5px padding */Specifications
| Specification |
|---|
| CSS Box Model Module Level 3 # padding-shorthand |