margin (CSS property)
| IE5.5+ | FF1+ | Saf1.3+ | Op9.2+ |
|---|---|---|---|
| Buggy | Full | Full | Full |
| Inherited | Initial | Version |
|---|---|---|
| No | 0 |
CSS1 |
Example
This style rule assigns a margin of ten
pixels to all four sides of paragraphs within the element with ID
"example":
#example p {
margin: 10px;
}Description
In the normal flow of a document, margins are generally used to control the horizontal and vertical whitespace around elements. You can think of a margin as having the effect of pushing the element away from other elements on the page.
Refer to the sections on the CSS box model, collapsing margins, containing blocks, and floating and clearing to understand exactly how margins work for all elements. The section on inline formatting also explains how margins affect inline elements.
Also see The CSS Box Model for an overview of how margins are handled in relation to an element’s borders, padding, and width.
Value
The shorthand property
margin allows all four sides of an element’s margins to
be set using either one, two, three or four specified values. Refer to the
mnemonic (TRouBLe) in Shorthand Properties as an easy
way to remember the shorthand order of margins.
The property takes a CSS length (px, pt, em, and so on),
the keyword auto, or a percentage of the width of the
element’s containing block. Note
that even for the top and bottom margins the percentage value will refer
to the width of the containing block. If the containing block’s
width depends on the element to which percentage margins are applied, the
resulting layout is undefined in CSS2.1.
Negative
values are allowed for margins (although implementation-specific limits
may apply), and have the effect of pulling the element in the direction of
the margin specified. This may cause the element to overlap other
elements, which may, of course, be the desired effect. In cases where
overlap occurs, we can determine the elements’ stacking levels by applying
z-index values to them. In the case of non-positioned
or floated elements, a z-index only takes effect when a
position is set to relative for
the elements, as a z-index can be applied only to
positioned elements.
Negative margins on floats are handled differently and the details are covered in Floating and Clearing.
When you use the value
auto, you’re allowing the browser to calculate the
margins for you automatically. In most cases, the calculated value will
default either to zero or to the distance required to reach the parent
element’s edge. In the case of a block element that has a specified width,
left and right margins to which a value of auto is
applied will be set to be equal. This will effectively center the element
in the available space.
If margins are
over-constrained—that is, the total of their specified dimensions is
greater than the available content space—the browser will reset one of the
margins to auto to overcome the
problem.
Compatibility
| IE | 5.5 | Buggy |
|---|---|---|
| 6.0 | Buggy | |
| 7.0 | Buggy | |
| Firefox | 1.0 | Full |
| 1.5 | Full | |
| 2.0 | Full | |
| Safari | 1.3 | Full |
| 2.0 | Full | |
| 3.0 | Full | |
| Opera | 9.2 | Full |
| 9.5 | Full |
Internet Explorer version 6 in some instances
incorrectly bases vertical margin percentage values on the width of the
body element, rather than the containing block.
Internet Explorer
version 5.5 (and version 6 in quirks mode) does not support the centering
of a block element that has a specified width by setting its left and
right margins to auto.
In
Internet Explorer versions up to and including 6, the left or right
margins are doubled on floated elements that touch their parents’ side
edges. The margin value is doubled on the side that touches the parent. A
simple fix for this problem is to set display to
inline for the floated element.
Internet Explorer for Windows versions up to and including 7 differ in their handling of margin collapse from the CSS2.1 specifications. See Collapsing Margins for a detailed analysis.
If the value of the horizontal negative margins are greater or equal to the sum of the width, padding, and borders of the element, the width of the element effectively becomes zero. Some older browsers (for example, Mozilla 1.6 and earlier versions) will appear to ignore the position of the element, much as they would an absolute element. This causes issues where following elements may not correctly clear the element in question. However, most modern browsers don’t experience this issue.
Internet Explorer for Windows versions up to and
including 7 don’t support the value inherit.
User-contributed notes
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.
