This is an experimental page.
Summary
The padding
property sets the padding space on all sides of an element. It is a shorthand to avoid setting each side separately (padding-top
, padding-right
, padding-bottom
, padding-left
).
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
/* Apply to all four sides */ padding: 1em; /* vertical | horizontal */ padding: 5% 10%; /* top | horizontal | bottom */ padding: 1em 2em 2em; /* top | right | bottom | left */ padding: 2px 1em 0 1em; /* 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>
.
- One value applies to all four sides.
- Two values apply first to top and bottom, the second one to left and right.
- Three values apply first to top, second to left and right and third to bottom.
- Four values apply to top, right, bottom and left in that order (clockwise).
Values
<length>
- Specifies a non-negative fixed width. See
<length>
for details. <percentage>
- With respect to the width of the containing block.
Formal syntax
[ <length> | <percentage> ]{1,4}
Examples
padding: 5%; /* on all sides 5% padding */
padding: 10px; /* on 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 */
border:outset; padding:5% 1em;
Live Sample
HTML
<h4>Hello world!</h4> <h3>The padding is different in this line.</h3>
CSS
h4{ background-color: green; padding: 50px 20px 20px 50px; } h3{ background-color: blue; padding: 400px 50px 50px 400px; }
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
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
Basic support | 1.0 | (Yes) | 1.0 (1.0) | 4.0 | 3.5 | 1.0 (85) |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | ? | (Yes) | ? | ? | ? | ? |