This property controls the size of the bottom 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] [N6|O7]
Type: Explicit
Description:
Explicitly sets the value of this property to that of the parent.
auto
[CSS1|CSS2]
[IE4B1|N4B2|O3.5]
Type: Calculated
Description:
This value specifies that a value determined by the browser be used for
this property.
[length]
[CSS1|CSS2]
[IE4B1|N4B2|O3.5]
Type: Explicit
Description:
Refers to either an absolute measurement or a relative measurement based on the
current element's font size.
[percentage]
[CSS1|CSS2]
[IE4B1|N4B3|O3.5]
Type: Calculated
Description:
Refers to a percentage of the width of the current element's containing block.
Example
Ext/Doc: blockquote
{ margin-bottom: 3.0in }
In-Line: <blockquoteSTYLE="margin-bottom:
3.0in">This is a test document</blockquote>
Browser Peculiarities
Internet Explorer
4.0-5.0:
- This property does not apply to inline elements or table cells (TD/TH.)
5.5+:
- Beginning in 5.5 Beta 1, this property now applies to inline elements.
Netscape
4.x:
- For inline elements, form field elements and replaced elements, a
linebreak is applied after the element, and then the bottom-margin
value is applied.
- Negative values are ignored for this property.
- All values for this property are ignored for LI 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.)
Opera
3.5:
- This property does not apply to inline elements, form fields and
replaced elements (eg: images.)
- 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.