Style Sheets Properties Guide
=Padding Properties=
= Index DOT Html by Brian Wilson [bloo@blooberry.com] =

padding | padding-top | padding-right | padding-bottom | padding-left
Main Index | Style Sheet Index | Element Tree | Element Index | HTML Support History


Box properties treat all block-level formatting elements like a virtual 'box'. The height and width of the box is determined by (going from inner-most dimension outward) the height and width of the contained elements (text and/or images) plus heights and widths for space around the element ('padding'), plus the height and widths created by added borders ('border'), along with exterior margin values ('margin') relative to elements exterior to the virtual box.

The Padding properties allow the author to specify how much space will be inserted between the element border and the element content. The surface of the padding area is set using the 'background' property and negative values are not allowed as padding values.


padding [ IE4B2 | N4B3 ]
Applicable Elements: ALL
HTML Equivalent: NA
Inherit From Parent: No
Default Value: 0
What Is It?
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.
Example
Ext/Doc: body { padding: 5px 0px 2px 0px }
In-Line:  <body STYLE="padding: 5px 0px 2px 0px">this is a test display document</body>
Browser Notes
- Netscape 4 Beta 3 Applying positive padding values to a SPAN element in my tests caused the element to overlap with surrounding text.
Allowed
Values
 Value
Type
 Browser
Support
 Description
[length] calculated IE4B2 | N4B3 Refers to either an absolute measurement or a relative measurement based on the current element's font size.
[percentage] calculated IE4B2 | N4B3 Refers to a percentage of the current element's width.


padding-top [ IE4B2 | N4B2 ]
Applicable Elements: ALL
HTML Equivalent: NA
Inherit From Parent: No
Default Value: 0
What Is It?
This property controls the size of the padding on the top of an element.
Example
Ext/Doc: address { padding-top: 33% }
In-Line:  <address STYLE="padding-top: 33%">This is a test</address>
Browser Notes
- Netscape 4 Beta 3 Applying positive padding values to a SPAN element in my tests caused the element to overlap with surrounding text.
Allowed
Values
 Value
Type
 Browser
Support
 Description
[length] calculated IE4B2 | N4B2 Refers to either an absolute measurement or a relative measurement based on the current element's font size.
[percentage] calculated IE4B2 | N4B3 Refers to a percentage of the current element's width.


padding-right [ IE4B2 | N4B2 ]
Applicable Elements: ALL
HTML Equivalent: NA
Inherit From Parent: No
Default Value: 0
What Is It?
This property controls the size of the padding on the right side of an element.
Example
Ext/Doc: h1 { padding-right: auto }
In-Line:  <h1 STYLE="padding-right: auto">This is a test</h1>
Browser Notes
- Netscape 4 Beta 3 Applying positive padding values to a SPAN element in my tests caused the element to overlap with surrounding text.
Allowed
Values
 Value
Type
 Browser
Support
 Description
[length] calculated IE4B2 | N4B2 Refers to either an absolute measurement or a relative measurement based on the current element's font size.
[percentage] calculated IE4B2 | N4B3 Refers to a percentage of the current element's width.


padding-bottom [ IE4B2 | N4B2 ]
Applicable Elements: ALL
HTML Equivalent: NA
Inherit From Parent: No
Default Value: 0
What Is It?
This property controls the size of the padding on the bottom of an element.
Example
Ext/Doc: blockquote { padding-bottom: 3.0in }
In-Line:  <blockquote STYLE="padding-bottom: 3.0in">This is a test document</blockquote>
Browser Notes
- Netscape 4 Beta 3 Applying positive padding values to a SPAN element in my tests caused the element to overlap with surrounding text.
Allowed
Values
 Value
Type
 Browser
Support
 Description
[length] calculated IE4B2 | N4B2 Refers to either an absolute measurement or a relative measurement based on the current element's font size.
[percentage] calculated IE4B2 | N4B3 Refers to a percentage of the current element's width.


padding-left [ IE4B2 | N4B2 ]
Applicable Elements: ALL
HTML Equivalent: NA
Inherit From Parent: No
Default Value: 0
What Is It?
This property controls the size of the padding on the left side of an element.
Example
Ext/Doc: h5 { padding-left: 1.0cm }
In-Line:  <h5 STYLE="padding-left: 1.0cm">This is a test</h5>
Browser Notes
- Netscape 4 Beta 3 Applying positive padding values to a SPAN element in my tests caused the element to overlap with surrounding text.
Allowed
Values
 Value
Type
 Browser
Support
 Description
[length] calculated IE4B2 | N4B2 Refers to either an absolute measurement or a relative measurement based on the current element's font size.
[percentage] calculated IE4B2 | N4B3 Refers to a percentage of the current element's width.

Boring Copyright Stuff....