This property controls the size of the top margin of an element's
rendering box. Negative values are allowed. Margins are transparent
and the background value of the parent element shines through.
Collapsing margins: adjoining vertical margins between regular-flow
elements may collapse; The larger of adjacent margin values is used.
If the adjacent margins are all negative, the larger of the negative
values is used. If positive and negative vertical margins are adjacent,
the value should be collapsed thus: the largest of the negative margin
values should be subtracted from the largest positive margin value.
Allowed Values
inherit
[CSS2|CSS2.1]
[N6|O7|S1]
Type: Explicit
Description:
Explicitly sets the value of this property to that of the parent.
auto
[CSS1|CSS2|CSS2.1]
[IE3B1|N4B2|O3.5|S1]
Type: Calculated
Description:
This value specifies that a value determined by the browser be used for
this property.
[length]
[CSS1|CSS2|CSS2.1]
[IE3B1|N4B2|O3.5|S1]
Type: Explicit
Description:
Refers to either an absolute measurement or a relative measurement based on the
current element's font size.
[percentage]
[CSS1|CSS2|CSS2.1]
[IE3B1|N4B3|O3.5|S1]
Type: Calculated
Description:
Refers to a percentage of the width of the current element's containing block.
Example
Ext/Doc: address { margin-top: 33% }
In-Line: <addressSTYLE="margin-top:
33%">This is a test</address>
Browser Peculiarities
Internet Explorer
3.0:
- Negative margin values were not supported until IE3, Beta 2.
- Margin values were not cumulative in this version; for each element,
the margin value was relative to the boundaries of the window, not
relative to the containing element. In version 3.01 this was changed
so that they were (correctly) cumulative.
- Adjacent vertical margins ('margin-top' and 'margin-bottom') of block
elements do not collapse in this version (only the greater of the adjacent
margins should be used) - they are both applied.
- Specified margin values are relative to the BODY margin property, not
to the edge of the page.
- Margin values are relative to the default values for a given element
(blockquote, heading, li, etc), not to the parent element edge.
3.0+:
- This property does not apply to table cells (TD/TH.)
3.0-5.0:
- This property does not apply to inline elements.
5.5+:
- Beginning in 5.5 Beta 1, this property now applies to inline elements.
Netscape
4.x:
- This property has no effect on inline elements, replaced elements (eg: images)
LI or DD elements.
- Negative values for this property have no effect on inline elements, replaced
elements (eg: images), LI or TD/TH elements.
- Values for this property are not applied relative to the parent
element edge as they should be for elements that do not use
default margins of zero (eg: most block-level elements.)
- Reported elsewhere: Specifying this property can cause extra linefeeds
when printing a document.
Opera
3.5:
- This property does not apply to inline elements, form fields and
replaced elements (eg: images.)
- This property does not apply to DT elements, but is applied to DD elements.
- Negative margins applied to images appear to sometimes obscure
content beneath even when the image is transparent. At least one
case of negative margins I tried also skews image dimensions from
their intrinsic values.
- Applying this property to table cells is very problematic, especially
negative margins. Some margin values cause extra cell-spacing while
others cause cell and content overlap.
- Observing the behavior of the W3C test suite, there appears to be
some problems in the rendering of punctuation characters at line-wrap points.