The padding
CSS property sets the padding area on all four sides of an element. It is a shorthand that sets all individual paddings at once: padding-top
, padding-right
, padding-bottom
, and padding-left
.
/* Apply to all four sides */ padding: 1em; /* vertical | horizontal */ padding: 5% 10%; /* top | horizontal | bottom */ padding: 1em 2em 2em; /* top | right | bottom | left */ padding: 5px 1em 0 1em; /* Global values */ padding: inherit; padding: initial; padding: unset;
<div class="grid"> <div class="col"> <div class="cell"> <div class="p p0">padding: 0</div> </div> <div class="cell"> <div class="p p1">padding: 1em</div> </div> <div class="cell"> <div class="p p2">padding: 5% 10%</div> </div> <div class="cell"> <div class="p p3">padding: 1em 2em 2em</div> </div> <div class="cell"> <div class="p p4">padding: 5px 1em 0 1em</div> </div> </div> </div>
html,body { height: 100%; box-sizing: border-box; } .grid { width: 100%; height: 100%; display: flex; background: #EEE; font: 1em monospace; } .col { display: flex; flex: 1 auto; flex-direction: column; } .cell { box-sizing: border-box; margin: .5em; padding: 0; background-color: #FFF; overflow: hidden; text-align: left; } .p { display: inline-block; background: #E4F0F5; border: 1px solid; } .p0 { padding: 0; } .p1 { padding: 1em; } .p2 { padding: 5% 10%; } .p3 { padding: 1em 2em 2em; } .p4 { padding: 5px 1em 0 1em; }
Initial value | as each of the properties of the shorthand: |
---|---|
Applies to | all elements, except table-row-group , table-header-group , table-footer-group , table-row , table-column-group and table-column . It also applies to ::first-letter . |
Inherited | no |
Percentages | refer to the width of the containing block |
Media | visual |
Computed value | as each of the properties of the shorthand:
|
Animation type | a length |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Syntax
The padding
property may be specified using one, two, three, or four values. Each value is a <length>
or a <percentage>
.
- When one value is specified, it applies the same padding to all four sides.
- When two values are specified, the first padding applies to the top and bottom, the second to the left and right.
- When three values are specified, the first padding applies to the top, the second to the left and right, the third to the bottom.
- When four values are specified, the paddings apply to the top, right, bottom, and left in that order (clockwise).
Values
<length>
- The size of the padding as a fixed value. Must be nonnegative.
<percentage>
- The size of the padding as a percentage, relative to the width of the containing block. Must be nonnegative.
Formal syntax
[ <length> | <percentage> ]{1,4}
Examples
Simple example
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; }
More examples
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 | Status | Comment |
---|---|---|
CSS Basic Box Model The definition of 'padding' in that specification. |
Working Draft | No change. |
CSS Level 2 (Revision 1) The definition of 'padding' in that specification. |
Recommendation | No change. |
CSS Level 1 The definition of 'padding' in that specification. |
Recommendation | Initial definition. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 1 | Yes | 1 | 4 | 3.5 | 1 |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic support | Yes | Yes | Yes | 4 | Yes | Yes | Yes |
See also
- CSS Box Model
- The
padding
shorthand property can be used to set paddings on all four sides of an element with a single declaration:padding-top
,padding-right
,padding-bottom
, andpadding-left
.
Document Tags and Contributors
Tags:
Contributors to this page:
fscholz,
Jeremie,
mfluehr,
xfq,
AlexanderJohn,
wbamberg,
erikadoyle,
bunnybooboo,
Sheppy,
jwhitlock,
Prinz_Rana,
Sebastianz,
quat1024,
Jargnik,
kscarfone,
teoli,
parthiv,
ethertank,
Dholbert,
ThePrisoner,
Doris52,
grendel,
jojomojo,
Yuichiro,
regjo,
gf3,
Jürgen Jeka,
BijuGC,
Waldo
Last updated by:
fscholz,