margin

Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
Short information
CSS CSS1
Default value No
Inherited No
Applied To all elements
HTML analog No
Reference to specification http://www.w3.org/TR/CSS21/box.html#propdef-margin
Description
It determines a space size from each border of an element. A space is the space from border of a current element to internal border of its parental element (fig. 1).

If the element does not have parent, the distance from element border to a window border of a browser taking into account that spaces are determined by default at the window too. If you want to dispose of them, it is necessary to determine the value margin for the selector that is equal to zero.
The parameter margin allows to set space size for all parties of an element at once or to define it only for the specified parties.

Syntax

margin: value | auto {1,4}
Arguments
It is allowed to use one, two, three or four values, dividing them among themselves by a blank. The effect depends on quantity of arguments and is given in tab. 1.
Тab. 1. Dependence on amount of arguments
Amount of arguments Result
1 Indents will be determined for all element sides.
2 The first argument determines a space from top and a bottom borders, the second argument — from left and right ones.
3 The first argument sets a space from an upper border, the second does from left and a right edge simultaneously, and the third — from a bottom border.
4 The space is determined step by step from top, right, bottom and a left border.
It is possible to specify size of spaces in pixels (px), percent (%) or other admissible units for CSS. Value can be both positive and a negative number. The argument auto specifies that the size of spaces will be automatically calculated by a browser.

Example

 
<!--
   BODY { 
    margin: 0; /* Remove indents */
   }
   DIV.parent {
    margin: 20%; /* Margins around the element */
    background: #fd0; /* Background color */
    padding: 10px; /* Areas around the text */
   } 
   DIV.child {
    border: 3px solid #666; /* Frame parameters */
    padding: 10px; /* Areas around the text */
    margin: 10px; /* Margins around */
   }
 
-->
<div class="parent">
<div class="child">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
    euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim
    ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl
    ut aliquip ex ea commodo consequat.</div>
</div>
The result of this example is shown on the figure 2

Object model
[window.]document.getElementById("elementID").style.margin