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 margin properties set the margin of an element. The 'margin' property sets the margin for all four sides while the other margin properties only set their respective side.
|
Value
|
<length> | <percentage> | auto auto: default to UserAgent setting Netscape 4.0, Internet Explorer 3.0 Note in IE 4.0+: This property does not work with inline elements Note in IE 5.5 Beta 1: This property works with inline elements Notes in Netscape 4.0+: This property does not work with inline elements, images, and list items. This property ignores negative values on inline elements, images, list items, and table cells |
|---|---|
|
Initial
|
0 |
|
Applies to
|
all elements |
|
Inherited
|
no |
|
Percentage Values
|
refer to width of closest block-level ancestor |
This property sets the top margin of an element:
| H1 { margin-top: 2em } |
A negative value is allowed, but there may be implementation-specific limits.
| Examples (inline element <font>): This is a normal paragraph This line has <font style="margin-top: 30px">...</font>This is a normal paragraph This line has <font style="margin-top: 2em">...</font>This is a normal paragraph This line has <font style="margin-top: 10pt">...</font>This is a normal paragraph This line has <font style="margin-top: 1cm">...</font>This is a normal paragraph This line has <font style="margin-top: 10%">...</font>This is a normal paragraph This line has <font style="margin-top: auto">...</font>This is a normal paragraph |
| Examples (block element <p>): This is a normal paragraph This paragraph has <p class="internal_margin_top_50px">...</p> This is a normal paragraph This paragraph has <p style="margin-top: 3em">...</p> This is a normal paragraph This paragraph has <p style="margin-top: 30pt">...</p> This is a normal paragraph This paragraph has <p style="margin-top: 2cm">...</p> This is a normal paragraph This paragraph has <p style="margin-top: 10%">...</p> This is a normal paragraph This paragraph has <p style="margin-top: auto">...</p> This is a normal paragraph |
|
Value
|
<length> | <percentage> | auto auto: default to UserAgent setting Netscape 4.0, Internet Explorer 3.0 Note in IE 4.0+: This property does not work with inline elements Note in IE 5.5 Beta 1: This property works with inline elements Notes in Netscape 4.0+: This property does not work with inline elements, images, and list items. This property ignores negative values on table cells |
|---|---|
|
Initial
|
0 |
|
Applies to
|
all elements |
|
Inherited
|
no |
|
Percentage Values
|
refer to width of closest block-level ancestor |
This property sets the right margin of an element:
| H1 { margin-right: 12.3% } |
A negative value is allowed, but there may be implementation-specific limits.
| 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="margin-right: 150px">...</font>. This line is added to test margin-right property. This line is added to test margin-right property. This line is added to test margin-right property. This line is added to test margin-right property. This line is added to test margin-right property. This line is added to test margin-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="margin-right: 10em">...</font>. This line is added to test margin-right property. This line is added to test margin-right property. This line is added to test margin-right property. This line is added to test margin-right property. This line is added to test margin-right property. This line is added to test margin-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="margin-right: 300pt">...</font>. This line is added to test margin-right property. This line is added to test margin-right property. This line is added to test margin-right property. This line is added to test margin-right property. This line is added to test margin-right property. This line is added to test margin-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="margin-right: 5cm">...</font>. This line is added to test margin-right property. This line is added to test margin-right property. This line is added to test margin-right property. This line is added to test margin-right property. This line is added to test margin-right property. This line is added to test margin-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="margin-right: 20%">...</font>. This line is added to test margin-right property. This line is added to test margin-right property. This line is added to test margin-right property. This line is added to test margin-right property. This line is added to test margin-right property. This line is added to test margin-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_margin_right_150px">...</p>. This line is added to test margin-right property. This line is added to test margin-right property. This line is added to test margin-right property. This line is added to test margin-right property. This line is added to test margin-right property. This line is added to test margin-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="margin-right: 10em">...</p>. This line is added to test margin-right property. This line is added to test margin-right property. This line is added to test margin-right property. This line is added to test margin-right property. This line is added to test margin-right property. This line is added to test margin-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="margin-right: 300pt">...</p>. This line is added to test margin-right property. This line is added to test margin-right property. This line is added to test margin-right property. This line is added to test margin-right property. This line is added to test margin-right property. This line is added to test margin-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="margin-right: 5cm">...</p>. This line is added to test margin-right property. This line is added to test margin-right property. This line is added to test margin-right property. This line is added to test margin-right property. This line is added to test margin-right property. This line is added to test margin-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="margin-right: 20%">...</p>. This line is added to test margin-right property. This line is added to test margin-right property. This line is added to test margin-right property. This line is added to test margin-right property. This line is added to test margin-right property. This line is added to test margin-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> | auto auto: default to UserAgent setting Netscape 4.0, Internet Explorer 4.0 Note in IE 4.0+: This property does not work with table cells or inline
elements Note in IE 5.5 Beta 1: This property works with inline elements Notes in Netscape 4.0+: This property does not work with inline elements, input fields, images, and list items. This property ignores negative values. |
|---|---|
|
Initial
|
0 |
|
Applies to
|
all elements |
|
Inherited
|
no |
|
Percentage Values
|
refer to width of closest block-level ancestor |
This property sets the bottom margin of an element:
| H1 { margin-bottom: 3px } |
A negative value is allowed, but there may be implementation-specific limits.
| Examples (inline element <font>): This is a normal paragraph This line has <font style="margin-bottom: 50px">...</font>This is a normal paragraph This line has <font style="margin-bottom: 2em">...</font>This is a normal paragraph This line has <font style="margin-bottom: 50pt">...</font>This is a normal paragraph This line has <font style="margin-bottom: 1cm">...</font>This is a normal paragraph This line has <font style="margin-bottom: 10%">...</font>This is a normal paragraph This line has <font style="margin-bottom: auto">...</font>This is a normal paragraph |
| Examples (block element <p>): This is a normal paragraph This paragraph has <p class="internal_margin_bottom_50px">...</p> This is a normal paragraph This paragraph has <p style="margin-top: 3em">...</p> This is a normal paragraph This paragraph has <p style="margin-bottom: 50pt">...</p> This is a normal paragraph This paragraph has <p style="margin-bottom: 2cm">...</p> This is a normal paragraph This paragraph has <p style="margin-bottom: 10%">...</p> This is a normal paragraph This paragraph has <p style="margin-bottom: auto">...</p> This is a normal paragraph |
|
Value
|
<length> | <percentage> | auto auto: default to UserAgent setting Netscape 4.0, Internet Explorer 3.0 Note in IE 4.0+: This property does not work with inline elements Note in IE 5.5 Beta 1: This property works with inline elements Notes in Netscape 4.0+: This property does not work with inline elements, images, and list items. This property ignores negative values on table cells |
|---|---|
|
Initial
|
0 |
|
Applies to
|
all elements |
|
Inherited
|
no |
|
Percentage Values
|
refer to width of closest block-level ancestor |
This property sets the left margin of an element:
| H1 { margin-left: 2em } |
A negative value is allowed, but there may be implementation-specific limits.
| 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="margin-left: 150px">...</font>. This line is added to test margin-left property. This line is added to test margin-left property. This line is added to test margin-left property. This line is added to test margin-left property. This line is added to test margin-left property. This line is added to test margin-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="margin-left: 10em">...</font>. This line is added to test margin-left property. This line is added to test margin-left property. This line is added to test margin-left property. This line is added to test margin-left property. This line is added to test margin-left property. This line is added to test margin-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="margin-left: 300pt">...</font>. This line is added to test margin-left property. This line is added to test margin-left property. This line is added to test margin-left property. This line is added to test margin-left property. This line is added to test margin-left property. This line is added to test margin-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="margin-left: 5cm">...</font>. This line is added to test margin-left property. This line is added to test margin-left property. This line is added to test margin-left property. This line is added to test margin-left property. This line is added to test margin-left property. This line is added to test margin-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="margin-left: 20%">...</font>. This line is added to test margin-left property. This line is added to test margin-left property. This line is added to test margin-left property. This line is added to test margin-left property. This line is added to test margin-left property. This line is added to test margin-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_margin_left_150px">...</p>. This line is added to test margin-left property. This line is added to test margin-left property. This line is added to test margin-left property. This line is added to test margin-left property. This line is added to test margin-left property. This line is added to test margin-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="margin-left: 10em">...</p>. This line is added to test margin-left property. This line is added to test margin-left property. This line is added to test margin-left property. This line is added to test margin-left property. This line is added to test margin-left property. This line is added to test margin-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="margin-left: 300pt">...</p>. This line is added to test margin-left property. This line is added to test margin-left property. This line is added to test margin-left property. This line is added to test margin-left property. This line is added to test margin-left property. This line is added to test margin-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="margin-left: 5cm">...</p>. This line is added to test margin-left property. This line is added to test margin-left property. This line is added to test margin-left property. This line is added to test margin-left property. This line is added to test margin-left property. This line is added to test margin-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="margin-left: 20%">...</p>. This line is added to test margin-left property. This line is added to test margin-left property. This line is added to test margin-left property. This line is added to test margin-left property. This line is added to test margin-left property. This line is added to test margin-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> | auto ]{1,4} Netscape 4.0, Internet Explorer 4.0 Note in IE 4.0+: This property does not work with inline elements. The "margin-bottom" property does not work with table cells. Note in IE 5.5 Beta 1: This property works with inline elements Notes in Netscape 4.0+: This property does not work properly with inline elements, input fields, images, and list items. This property ignores the bottom margin declaration entirely if a top margin has been specified. |
|---|---|
|
Initial
|
not defined for shorthand properties |
|
Applies to
|
all elements |
|
Inherited
|
no |
|
Percentage Values
|
refer to width of closest block-level ancestor |
The 'margin' property is a shorthand property for setting 'margin-top', 'margin-right', 'margin-bottom' and 'margin-left' at the same place in the style sheet.
If four length 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.
| BODY { margin: 2em } /* all margins set to 2em */ BODY { margin: 1em 2em } /* top & bottom = 1em, right & left = 2em */ BODY { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */ |
The last rule of the example above is equivalent to the example below:
| BODY { margin-top: 1em; margin-right: 2em; margin-bottom: 3em; margin-left: 2em; /* copied from opposite side (right) */ } |
A negative value is allowed, but there may be implementation-specific limits.
| 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="margin: 150px">...</font>. This line is added to test margin property. margin-top = margin-right = margin-bottom = margin-left = 150px. This line is added to test margin property. This line is added to test margin property. This line is added to test margin property. This line is added to test margin property. This line is added to test margin 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="margin: 10em 5em">...</font>. This line is added to test margin property. margin-top = margin-bottom = 10em. margin-right = margin-left = 5em. This line is added to test margin property. This line is added to test margin property. This line is added to test margin property. This line is added to test margin property. This line is added to test margin 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="margin: 100pt 10% 200px">...</font>. This line is added to test margin property. margin-top = 100pt. margin-right = margin-left = 10%. margin-bottom = 200px. This line is added to test margin property. This line is added to test margin property. This line is added to test margin property. This line is added to test margin property. This line is added to test margin 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="margin: 2cm 3cm 4cm 5cm">...</font>. This line is added to test margin-top = 2cm. margin-right = 3cm. margin-bottom = 4cm. margin-left = 5cm. This line is added to test margin property. This line is added to test margin property. This line is added to test margin property. This line is added to test margin property. This line is added to test margin 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_margin_150px">...</p>. This line is added to test margin property. margin-top = margin-right = margin-bottom = margin-left = 150px. This line is added to test margin property. This line is added to test margin property. This line is added to test margin property. This line is added to test margin property. This line is added to test margin 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="margin: 10em 5em">...</p>. This line is added to test margin property. margin-top = margin-bottom = 10em. margin-right = margin-left = 5em. This line is added to test margin property. This line is added to test margin property. This line is added to test margin property. This line is added to test margin property. This line is added to test margin 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="margin: 100pt 10% 200px">...</p>. This line is added to test margin property. margin-top = 100pt. margin-right = margin-left = 10%. margin-bottom = 200px. This line is added to test margin property. This line is added to test margin property. This line is added to test margin property. This line is added to test margin property. This line is added to test margin 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="margin: 2cm 3cm 4cm 5cm">...</p>. This line is added to test margin property. margin-top = 2cm. margin-right = 3cm. margin-bottom = 4cm. margin-left = 5cm. This line is added to test margin property. This line is added to test margin property. This line is added to test margin property. This line is added to test margin property. This line is added to test margin 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. |