This is a shorthand property which allows an author to specify 'padding-top',
'padding-right', 'padding-bottom', and 'padding-left' properties using a single
property and value notation (the values are given in this order separated
by spaces.) If one or more of the values are not present, the value for a
missing side is taken from the opposite side that is present. If only one
value is listed, it applies to all sides. The rendered surface of the padding
area is taken from the 'background' property.
Allowed Values
inherit
[CSS2] [N6|O7]
Type: Explicit
Description:
Explicitly sets the value of this property to that of the parent.
[length]
[CSS1|CSS2]
[IE4B2|N4B3|O3.5]
Type: Explicit
Description:
Refers to either an absolute measurement or a relative measurement based on the
current element's font size.
[percentage]
[CSS1|CSS2]
[IE4B2|N4B3|O3.5]
Type: Calculated
Description:
Refers to a percentage of the width of the current element's containing block.
In-Line: <bodySTYLE="padding:
5px 5px 2px 25px">this is a test display document</body>
Browser Peculiarities
Internet Explorer
4.0:
- Of the various form field types, Padding properties are only applied to
button widgets (Input Type=Submit|Reset|Button.)
- Padding applied to TABLE elements applies to the individual cells, not
the table structure.
4.0+:
- Using Padding properties on a form button widget
(Input Type=Submit|Reset|Button) applies the padding inside the button,
not outside the button.
- Padding properties do not apply to images
4.0-5.0:
- This property does not apply to inline elements.
5.0+:
- Padding applied to TABLE elements has SOME effect on cell
content, but it is difficult to identify patterns to the behavior.
- Padding now applies to text entry fields as well (Input
Type="File|Text", Textarea), but as with button widgets, the padding
is applied inside the field, not outside it.
5.5+:
- Beginning in 5.5 Beta 1, this property now applies to inline elements.
Netscape
4.x:
- Positive padding values on inline elements appears to be very broken
(negative or zero values are ignored.) I am sure there is probably a rational
heuristic at work deciding what to do with the content, but in most cases the
result is badly overlapping content. Stay away from this in Netscape.
- Applying padding values to a replaced object (my test was an IMG element)
really messes with document content flow.
- Padding applied to individual List Items (LI) causes the list marker
to NOT be rendered. If applied to a list structure (OL, UL, etc) the list
markers are rendered.
- Padding applied to TABLE elements applies to the individual cells, not the
table structure.
- Some situations involving padding properties can cause extra line feeds when printing.
Opera
3.5:
- Padding is not applied to replaced items (IMG, form field widgets, etc.)
- Padding-top and Padding-bottom values are ignored for inline elements
(EM, STRONG, SPAN, etc.) Only Padding-left and Padding-right values
are honored for spacing. The surface color for the padding, however,
DOES cover any specified Padding-top and Padding-bottom values.
- Padding applied to TABLE elements has odd effects. No effect on TD/TH.