{margin:}
margin: { { length | percentage | auto } 1 to 4 values | inherit } ;
In the normal flow of a document, {margin:}s 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.
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 {margin:}s.
The {margin:} 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 {margin:}s the percentrage 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 {margin:}s, although implementation-specific limits may apply, and they have the effect of pulling the element in the direction of the {margin:} specified.
If {margin:}s are over-constrained -- that is, the total of their unspecified dimensions is greater than the available content space -- the browser will reset one of the {margin:}s to {auto;} to overcome the problem.
IE6 in some instances incorrectly bases vertical margin percentage values on the width of the <body> element, rather than the containing block.
IE5.5 (& IE6 in Quirks Mode) doesn't support the centering of a block element that has a specified width by setting its left or right {margin:}s to {auto;}.
In IE up to and including 6, the left or right {margin:}s 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:inline;} to the floated element.
IE for Windows up to and including 7 differ in their handling of margin collapse from the CSS2.1 specifications.
If the value of the horizontal negative {margin:}s are greater or equal to the sum of the {width:}, {padding:} and {borders:} of the element, the {width:} of the element effectively becomes {0;}. 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.
IE for Windows versions up to and including 7 don't support the value {inherit;}.