The padding
CSS property sets the padding area on all four sides of an element. It is a shorthand for padding-top
, padding-right
, padding-bottom
, and padding-left
.
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 space around an element.
/* 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 2em; /* Global values */ padding: inherit; padding: initial; padding: unset;
The padding
property may be specified using one, two, three, or four values. Each value is a <length>
or a <percentage>
. Negative values are invalid.
<length>
<percentage>
[ <length> | <percentage> ]{1,4}
<h4>This element has moderate padding.</h4> <h3>The padding is huge in this element!</h3>
h4 { background-color: lime; padding: 20px 50px; } h3 { background-color: cyan; padding: 110px 50px 50px 110px; }
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 */
Specification | Status | Comment |
---|---|---|
CSS Basic Box Model The definition of 'padding' in that specification. | Working Draft | No change. |
CSS Transitions The definition of 'padding' in that specification. | Working Draft | Defines padding as animatable. |
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. |
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 |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 1 | 12 | 1 | 4 | 3.5 | 1 |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | Yes | Yes | Yes | 4 | Yes | Yes | Yes |
padding
shorthand property sets paddings on all four sides of an element: padding-top
, padding-right
, padding-bottom
, and padding-left
.
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/padding