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

margin | margin-top | margin-right | margin-bottom | margin-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 Margin properties allow the author to specify how much space will be inserted between other exterior elements and the current element border.
NOTE: The current official CSS1 specification does not explain the value of 'auto' very well.


margin [ IE3 | 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 'margin-top', 'margin-right', 'margin-bottom', and 'margin-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. Negative values are allowed for each margin value which opens the way for Text Overlays to be created.
Example
Ext/Doc: body { margin: 5px 0px 2px 25px }
In-Line:  <body STYLE="margin: 5px 0px 2px 25px">this is a test display document</body>
Allowed
Values
 Value
Type
 Browser
Support
 Description
auto calculated IE3 | N4B3 This value specifies that the browser default margin values be used for the 'margin-top', 'margin-right', 'margin-bottom', and 'margin-left' properties.
[length] calculated IE3 | N4B3 Refers to either an absolute measurement or a relative measurement based on the current element's font size.
[percentage] calculated IE3 | N4B3 Refers to a percentage of the current element's width.


margin-top [ IE3B1 | N4B2 ]
Applicable Elements: ALL
HTML Equivalent: NA
Inherit From Parent: No
Default Value: 0
What Is It?
This property controls the size of the top margin of an element. Negative values are allowed.
Example
Ext/Doc: address { margin-top: 33% }
In-Line:  <address STYLE="margin-top: 33%">This is a test</address>
Browser Notes:
Internet Explorer did not support negative margin values until IE3B2.
Allowed
Values
 Value
Type
 Browser
Support
 Description
auto calculated IE3B1 | N4B2 This value specifies that the browser default margin value be used for the 'margin-top' property.
[length] calculated IE3B1 | N4B2 Refers to either an absolute measurement or a relative measurement based on the current element's font size.
[percentage] calculated IE3B1 | N4B3 Refers to a percentage of the current element's width.


margin-right [ IE3B1 | N4B2 ]
Applicable Elements: ALL
HTML Equivalent: NA
Inherit From Parent: No
Default Value: 0
What Is It?
This property controls the size of the right margin of an element. Negative values are allowed.
Example
Ext/Doc: h1 { margin-right: auto }
In-Line:  <h1 STYLE="margin-right: auto">This is a test</h1>
Browser Notes:
Internet Explorer did not support negative margin values until IE3B2.
Allowed
Values
 Value
Type
 Browser
Support
 Description
auto calculated IE3B1 | N4B2 This value specifies that the browser default margin value be used for the 'margin-right' property.
[length] calculated IE3B1 | N4B2 Refers to either an absolute measurement or a relative measurement based on the current element's font size.
[percentage] calculated IE3B1 | N4B3 Refers to a percentage of the current element's width.


margin-bottom [ IE4B1 | N4B2 ]
Applicable Elements: ALL
HTML Equivalent: NA
Inherit From Parent: No
Default Value: 0
What Is It?
This property controls the size of the bottom margin of an element. Negative values are allowed.
Example
Ext/Doc: blockquote { margin-bottom: 3.0in }
In-Line:  <blockquote STYLE="margin-bottom: 3.0in">This is a test document</blockquote>
Allowed
Values
 Value
Type
 Browser
Support
 Description
auto calculated IE4B1 | N4B2 This value specifies that the browser default margin value be used for the 'margin-bottom' property.
[length] calculated IE4B1 | N4B2 Refers to either an absolute measurement or a relative measurement based on the current element's font size.
[percentage] calculated IE4B1 | N4B3 Refers to a percentage of the current element's width.


margin-left [ IE3B1 | N4B2 ]
Applicable Elements: ALL
HTML Equivalent: NA
Inherit From Parent: No
Default Value: 0
What Is It?
This property controls the size of the left margin of an element. Negative values are allowed.
Example
Ext/Doc: h5 { margin-left: 1.0cm }
In-Line:  <h5 STYLE="margin-left: 1.0cm">This is a test</h5>
Browser Notes:
Internet Explorer did not support negative margin values until IE3B2.
Allowed
Values
 Value
Type
 Browser
Support
 Description
auto calculated IE3B1 | N4B2 This value specifies that the browser default margin value be used for the 'margin-left' property.
[length] calculated IE3B1 | N4B2 Refers to either an absolute measurement or a relative measurement based on the current element's font size.
[percentage] calculated IE3B1 | N4B3 Refers to a percentage of the current element's width.


Boring Copyright Stuff....