padding-left (CSS property)
| IE6+ | FF1+ | Saf1.3+ | Op9.2+ |
|---|---|---|---|
| Full | Full | Full | Full |
| Inherited | Initial | Version |
|---|---|---|
| No | 0 |
CSS1, 2.1 |
Example
This style rule assigns a 2em padding to
the left side of paragraphs within the element with ID
"example":
#example p {
padding-left: 2em;
}Description
The property
padding-left sets the padding to the left side of an
element using the value specified.
Padding is the area that’s sandwiched between an element’s borders and its content. Any background image or background color that’s applied to the element will extend across the padding area. Refer to The CSS Box Model for an in-depth discussion of how padding is accommodated within the CSS box model.
When horizontal padding
(padding-left and padding-right) is
used on inline, non-replaced elements, it has a different effect than it
has on block-level elements. The padding-left value is
applied at the start of the inline element, while
padding-right is applied at the end of the inline
element. If the element is split over two or more line boxes, the right
padding wraps to the next line with the element. It doesn’t apply padding
to the start and end of each single line, as is the case with block-level
elements. See Inline Formatting for more
information.
Value
The property takes a CSS length (px, pt, em, and so on) or a percentage of the width of the element’s containing block. Note that even for top and bottom padding the percentage value will refer to the width of the containing block. Negative length values are not allowed.
In CSS2.1, if the containing block’s width depends on an element with percentage padding, the resulting layout is undefined.
Compatibility
| IE | 5.5 | Buggy |
|---|---|---|
| 6.0 | Full | |
| 7.0 | Full | |
| Firefox | 1.0 | Full |
| 1.5 | Full | |
| 2.0 | Full | |
| Safari | 1.3 | Full |
| 2.0 | Full | |
| 3.0 | Full | |
| Opera | 9.2 | Full |
| 9.5 | Full |
Internet Explorer versions up to and including 5.5 (and
IE6 and IE7 when in quirks mode) incorrectly apply
padding inside the stated width,
thus reducing the space available for content—see The Internet Explorer 5 Box Model.
Internet Explorer for Windows versions up to and
including 7 don’t support the value inherit.
User-contributed notes
There are no comments yet.
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.
