microsoft.com Home   All Products  |   Support  |   Search  |   microsoft.com Home  
Microsoft

Microsoft Typography | Typography on the Web | Specifying... | 5.5 Box properties next


5.5 Box properties

The box properties set the size, circumference and position of the boxes that represent elements. See the formatting model (section 4) for examples on how to use the box properties.

The margin properties properties set the margin of an element. The 'margin' property sets the border for all four sides while the other margin properties only set their respective side.

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.

The border properties set the borders of an element. Each element has four borders, one on each side, that are defined by their width, color and style.

The 'width' and 'height' properties set the size of the box, and the 'float' and 'clear' properties can alter the position of elements.


5.5.1 'margin-top'

Value: <length> | <percentage> | auto
Initial: 0
Applies to: all elements
Inherited: no
Percentage values: refer to parent element's width
Microsoft® Internet Explorer 3.0 support: partial. Some units are not supported.
Microsoft Internet Explorer 4.0 support: yes.

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.


5.5.2 'margin-right'

Value: <length> | <percentage> | auto
Initial: 0
Applies to: all elements
Inherited: no
Percentage values: refer to parent element's width
Microsoft Internet Explorer 3.0 support: partial. Some units are not supported.
Microsoft Internet Explorer 4.0 support: yes.

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.


5.5.3 'margin-bottom'

Value: <length> | <percentage> | auto
Initial: 0
Applies to: all elements
Inherited: no
Percentage values: refer to parent element's width
Microsoft Internet Explorer 3.0 support: no.
Microsoft Internet Explorer 4.0 support: yes.

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.


5.5.4 'margin-left'

Value: <length> | <percentage> | auto
Initial: 0
Applies to: all elements
Inherited: no
Percentage values: refer to parent element's width
Microsoft Internet Explorer 3.0 support: partial. Some units are not supported.
Microsoft Internet Explorer 4.0 support: yes.

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.


5.5.5 'margin'

Value: [ <length> | <percentage> | auto ]{1,4}
Initial: not defined for shorthand properties
Applies to: all elements
Inherited: no
Percentage values: refer to parent element's width
Microsoft Internet Explorer 3.0 support: partial. Some units are not supported and bottom values are not supported.
Microsoft Internet Explorer 4.0 support: yes.

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) */ }

Negative margin values are allowed, but there may be implementation-specific limits.



Dark blue text is taken from Cascading Style Sheets, level 1. W3C Recommendation 17 December 1996 - http://www.w3.org/pub/WWW/TR/REC-CSS1

this text [ext link] signifies an external link, please read our disclaimer.

this page was last updated 2 November 1997
© 1997 Microsoft Corporation. All rights reserved. Terms of use.
comments to the MST group: how to contact us

 

Microsoft Typography | Typography on the Web | Specifying... | 5.5 Box properties next