CSS1Home Properties BoxProperties Next Prev
The box properties set the size, circumference and position of the boxes that represent elements. See Chapter 2: CSS Formatting Model for examples on how to use the box properties.
The padding properties describe how much space to insert between the border and the content (e.g., text or image). The 'padding' property sets the padding for all four sides while the other padding properties only set their respective side.
|
Value
|
<length> | <percentage> Netscape 4.0, Internet Explorer 3.0 Note in IE 4.0+: This property does not work properly with inline elements, and images Note in IE 5.0+: This property does not work properly with tables, table cells and input fields Note in IE 5.5 Beta 1: This property works with inline elements Note in Netscape 4.0+: This property does not work properly with inline elements, list items, tables, and images |
|---|---|
|
Initial
|
0 |
|
Applies to
|
all elements |
|
Inherited
|
no |
|
Percentage Values
|
refer to width of closest block-level ancestor |
This property sets the top padding of an element:
| BLOCKQUOTE { padding-top: 0.3em } |
Padding values cannot be negative.
| Examples (inline element <font>): This is a normal paragraph This line has <font style="padding-top: 30px">...</font>This is a normal paragraph This line has <font style="padding-top: 2em">...</font>This is a normal paragraph This line has <font style="padding-top: 10pt">...</font>This is a normal paragraph This line has <font style="padding-top: 1cm">...</font>This is a normal paragraph This line has <font style="padding-top: 10%">...</font>This is a normal paragraph |
| Examples (block element <p>): This is a normal paragraph This paragraph has <p class="internal_padding_top_50px">...</p> This is a normal paragraph This paragraph has <p style="padding-top: 3em">...</p> This is a normal paragraph This paragraph has <p style="padding-top: 30pt">...</p> This is a normal paragraph This paragraph has <p style="padding-top: 2cm">...</p> This is a normal paragraph This paragraph has <p style="padding-top: 10%">...</p> This is a normal paragraph |
|
Value
|
<length> | <percentage> Netscape 4.0, Internet Explorer 4.0 Note in IE 4.0+: This property does not work properly with inline elements, and images Note in IE 5.0+: This property does not work properly with tables, table cells and input fields Note in IE 5.5 Beta 1: This property works with inline elements Note in Netscape 4.0+: This property does not work properly with inline elements, list items, tables, and images |
|---|---|
|
Initial
|
0 |
|
Applies to
|
all elements |
|
Inherited
|
no |
|
Percentage Values
|
refer to width of closest block-level ancestor |
This property sets the right padding of an element:
| BLOCKQUOTE { padding-right: 10px } |
Padding values cannot be negative.
| Examples (inline element <font>): This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This line has <font style="padding-right: 150px">...</font>. This line is added to test padding-right property. This line is added to test padding-right property. This line is added to test padding-right property. This line is added to test padding-right property. This line is added to test padding-right property. This line is added to test padding-right property.This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This line has <font style="padding-right: 10em">...</font>. This line is added to test padding-right property. This line is added to test padding-right property. This line is added to test padding-right property. This line is added to test padding-right property. This line is added to test padding-right property. This line is added to test padding-right property.This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This line has <font style="padding-right: 300pt">...</font>. This line is added to test padding-right property. This line is added to test padding-right property. This line is added to test padding-right property. This line is added to test padding-right property. This line is added to test padding-right property. This line is added to test padding-right property.This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This line has <font style="padding-right: 5cm">...</font>. This line is added to test padding-right property. This line is added to test padding-right property. This line is added to test padding-right property. This line is added to test padding-right property. This line is added to test padding-right property. This line is added to test padding-right property.This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This line has <font style="padding-right: 20%">...</font>. This line is added to test padding-right property. This line is added to test padding-right property. This line is added to test padding-right property. This line is added to test padding-right property. This line is added to test padding-right property. This line is added to test padding-right property.This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. |
| Examples (block element <p>): This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This paragraph has <p class="internal_padding_right_150px">...</p>. This line is added to test padding-right property. This line is added to test padding-right property. This line is added to test padding-right property. This line is added to test padding-right property. This line is added to test padding-right property. This line is added to test padding-right property. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This paragraph has <p style="padding-right: 10em">...</p>. This line is added to test padding-right property. This line is added to test padding-right property. This line is added to test padding-right property. This line is added to test padding-right property. This line is added to test padding-right property. This line is added to test padding-right property. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This paragraph has <p style="padding-right: 300pt">...</p>. This line is added to test padding-right property. This line is added to test padding-right property. This line is added to test padding-right property. This line is added to test padding-right property. This line is added to test padding-right property. This line is added to test padding-right property. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This paragraph has <p style="padding-right: 5cm">...</p>. This line is added to test padding-right property. This line is added to test padding-right property. This line is added to test padding-right property. This line is added to test padding-right property. This line is added to test padding-right property. This line is added to test padding-right property. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This paragraph has <p style="padding-right: 20%">...</p>. This line is added to test padding-right property. This line is added to test padding-right property. This line is added to test padding-right property. This line is added to test padding-right property. This line is added to test padding-right property. This line is added to test padding-right property. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. |
|
Value
|
<length> | <percentage> Netscape 4.0, Internet Explorer 4.0 Note in IE 4.0+: This property does not work properly with inline elements, and images Note in IE 5.0+: This property does not work properly with tables, table cells and input fields Note in IE 5.5 Beta 1: This property works with inline elements Note in Netscape 4.0+: This property does not work properly with inline elements, list items, tables, and images |
|---|---|
|
Initial
|
0 |
|
Applies to
|
all elements |
|
Inherited
|
no |
|
Percentage Values
|
refer to width of closest block-level ancestor |
This property sets the bottom padding of an element:
| BLOCKQUOTE { padding-bottom: 2em } |
Padding values cannot be negative.
| Examples (inline element <font>): This is a normal paragraph This line has <font style="padding-bottom: 50px">...</font>This is a normal paragraph This line has <font style="padding-bottom: 2em">...</font>This is a normal paragraph This line has <font style="padding-bottom: 50pt">...</font>This is a normal paragraph This line has <font style="padding-bottom: 1cm">...</font>This is a normal paragraph This line has <font style="padding-bottom: 10%">...</font>This is a normal paragraph |
| Examples (block element <p>): This is a normal paragraph This paragraph has <p class="internal_padding_bottom_50px">...</p> This is a normal paragraph This paragraph has <p style="padding-top: 3em">...</p> This is a normal paragraph This paragraph has <p style="padding-bottom: 50pt">...</p> This is a normal paragraph This paragraph has <p style="padding-bottom: 2cm">...</p> This is a normal paragraph This paragraph has <p style="padding-bottom: 10%">...</p> This is a normal paragraph |
|
Value
|
<length> | <percentage> Netscape 4.0, Internet Explorer 4.0 Note in IE 4.0+: This property does not work properly with inline elements, and images Note in IE 5.0+: This property does not work properly with tables, table cells and input fields Note in IE 5.5 Beta 1: This property works with inline elements Note in Netscape 4.0+: This property does not work properly with inline elements, list items, tables, and images |
|---|---|
|
Initial
|
0 |
|
Applies to
|
all elements |
|
Inherited
|
no |
|
Percentage Values
|
refer to width of closest block-level ancestor |
This property sets the left padding of an element:
| BLOCKQUOTE { padding-left: 20% } |
Padding values cannot be negative.
| Examples (inline element <font>): This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This line has <font style="padding-left: 150px">...</font>. This line is added to test padding-left property. This line is added to test padding-left property. This line is added to test padding-left property. This line is added to test padding-left property. This line is added to test padding-left property. This line is added to test padding-left property.This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This line has <font style="padding-left: 10em">...</font>. This line is added to test padding-left property. This line is added to test padding-left property. This line is added to test padding-left property. This line is added to test padding-left property. This line is added to test padding-left property. This line is added to test padding-left property.This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This line has <font style="padding-left: 300pt">...</font>. This line is added to test padding-left property. This line is added to test padding-left property. This line is added to test padding-left property. This line is added to test padding-left property. This line is added to test padding-left property. This line is added to test padding-left property.This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This line has <font style="padding-left: 5cm">...</font>. This line is added to test padding-left property. This line is added to test padding-left property. This line is added to test padding-left property. This line is added to test padding-left property. This line is added to test padding-left property. This line is added to test padding-left property.This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This line has <font style="padding-left: 20%">...</font>. This line is added to test padding-left property. This line is added to test padding-left property. This line is added to test padding-left property. This line is added to test padding-left property. This line is added to test padding-left property. This line is added to test padding-left property.This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. |
| Examples (block element <p>): This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This paragraph has <p class="internal_padding_left_150px">...</p>. This line is added to test padding-left property. This line is added to test padding-left property. This line is added to test padding-left property. This line is added to test padding-left property. This line is added to test padding-left property. This line is added to test padding-left property. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This paragraph has <p style="padding-left: 10em">...</p>. This line is added to test padding-left property. This line is added to test padding-left property. This line is added to test padding-left property. This line is added to test padding-left property. This line is added to test padding-left property. This line is added to test padding-left property. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This paragraph has <p style="padding-left: 300pt">...</p>. This line is added to test padding-left property. This line is added to test padding-left property. This line is added to test padding-left property. This line is added to test padding-left property. This line is added to test padding-left property. This line is added to test padding-left property. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This paragraph has <p style="padding-left: 5cm">...</p>. This line is added to test padding-left property. This line is added to test padding-left property. This line is added to test padding-left property. This line is added to test padding-left property. This line is added to test padding-left property. This line is added to test padding-left property. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This paragraph has <p style="padding-left: 20%">...</p>. This line is added to test padding-left property. This line is added to test padding-left property. This line is added to test padding-left property. This line is added to test padding-left property. This line is added to test padding-left property. This line is added to test padding-left property. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. |
|
Value
|
[ <length> | <percentage> ]{1,4} Netscape 4.0, Internet Explorer 4.0 Note in IE 4.0+: This property does not work properly with inline elements, and images Note in IE 5.0+: This property does not work properly with tables, table cells and input fields Note in IE 5.5 Beta 1: This property works with inline elements Note in Netscape 4.0+: This property does not work properly with inline elements, list items, tables, and images |
|---|---|
|
Initial
|
not defined for shorthand properties |
|
Applies to
|
all elements |
|
Inherited
|
no |
|
Percentage Values
|
refer to width of closest block-level ancestor |
The 'padding' property is a shorthand property for setting 'padding-top', 'padding-right', 'padding-bottom' and 'padding-left' at the same place in the style sheet.
If four values are specified they apply to top, right, bottom and left respectively. If there is only one value, it applies to all sides, if there are two or three, the missing values are taken from the opposite side.
The surface of the padding area is set with the 'background' property:
| H1 { background: white; padding: 1em 2em; } |
The example above sets a '1em' padding vertically ('padding-top' and 'padding-bottom') and a '2em' padding horizontally ('padding-right' and 'padding-left'). The 'em' unit is relative to the element's font size: '1em' is equal to the size of the font in use.
Padding values cannot be negative.
| Examples (inline element <font>): This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This line has <font style="padding: 150px">...</font>. This line is added to test padding property. padding-top = padding-right = padding-bottom = padding-left = 150px. This line is added to test padding property. This line is added to test padding property. This line is added to test padding property. This line is added to test padding property. This line is added to test padding property.This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This line has <font style="padding: 10em 5em">...</font>. This line is added to test padding property. padding-top = padding-bottom = 10em. padding-right = padding-left = 5em. This line is added to test padding property. This line is added to test padding property. This line is added to test padding property. This line is added to test padding property. This line is added to test padding property.This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This line has <font style="padding: 100pt 10% 200px">...</font>. This line is added to test padding property. padding-top = 100pt. padding-right = padding-left = 10%. padding-bottom = 200px. This line is added to test padding property. This line is added to test padding property. This line is added to test padding property. This line is added to test padding property. This line is added to test padding property.This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This line has <font style="padding: 2cm 3cm 4cm 5cm">...</font>. This line is added to test padding-top = 2cm. padding-right = 3cm. padding-bottom = 4cm. padding-left = 5cm. This line is added to test padding property. This line is added to test padding property. This line is added to test padding property. This line is added to test padding property. This line is added to test padding property.This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. |
| Examples (block element <p>): This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This paragraph has <p class="internal_padding_150px">...</p>. This line is added to test padding property. padding-top = padding-right = padding-bottom = padding-left = 150px. This line is added to test padding property. This line is added to test padding property. This line is added to test padding property. This line is added to test padding property. This line is added to test padding property. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This paragraph has <p style="padding: 10em 5em">...</p>. This line is added to test padding property. padding-top = padding-bottom = 10em. padding-right = padding-left = 5em. This line is added to test padding property. This line is added to test padding property. This line is added to test padding property. This line is added to test padding property. This line is added to test padding property. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This paragraph has <p style="padding: 100pt 10% 200px">...</p>. This line is added to test padding property. padding-top = 100pt. padding-right = padding-left = 10%. padding-bottom = 200px. This line is added to test padding property. This line is added to test padding property. This line is added to test padding property. This line is added to test padding property. This line is added to test padding property. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This paragraph has <p style="padding: 2cm 3cm 4cm 5cm">...</p>. This line is added to test padding property. padding-top = 2cm. padding-right = 3cm. padding-bottom = 4cm. padding-left = 5cm. This line is added to test padding property. This line is added to test padding property. This line is added to test padding property. This line is added to test padding property. This line is added to test padding property. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. |