The padding-left
CSS property sets the width of the padding area on the left side of an element.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
An element's padding area is the space between its content and its border.
Note: The padding
property can be used to set paddings on all four sides of an element with a single declaration.
Syntax
/* <length> values */ padding-left: 0.5em; padding-left: 0; padding-left: 2cm; /* <percentage> value */ padding-left: 10%; /* Global values */ padding-left: inherit; padding-left: initial; padding-left: unset;
The padding-left
property is specified as a single value chosen from the list below. Unlike margins, negative values are not allowed for padding.
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>
Examples
.content { padding-left: 5%; } .sidebox { padding-left: 10px; }
Specifications
Specification | Status | Comment |
---|---|---|
CSS Basic Box Model The definition of 'padding-left' in that specification. |
Working Draft | No change. |
CSS Transitions The definition of 'padding-left' in that specification. |
Working Draft | Defines padding-left as animatable. |
CSS Level 2 (Revision 1) The definition of 'padding-left' in that specification. |
Recommendation | No change. |
CSS Level 1 The definition of 'padding-left' in that specification. |
Recommendation | Initial definition. |
Initial value | 0 |
---|---|
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 | the percentage as specified or the absolute length |
Animation type | a length |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Browser compatibility
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 1 | 12 | 1 | 4 | 3.5 | 1 |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
---|---|---|---|---|---|---|---|
Basic support | Yes | Yes | Yes | 4 | Yes | Yes | Yes |