margin-top

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 0
Inherited No
Applied To all elements
HTML analog No
Reference to specification http://www.w3.org/TR/CSS21/box.html#propdef-margin-top

Description
It determines an indentation size from the top margin of an element. A space is the distance from external margin of the current element top margin to internal margin of its parental element (fig. 1).


Syntax

margin-top: value | auto.

Arguments
You can specify size of the top indentation 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 indentation size will be automatically calculated by a browser.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>margin-top</title>
  <style type="text/css">
   DIV {
    background: #fc3; /* Background color */
    border: 2px solid black;  /* Frame parameters */
    padding: 20px;  /* Areas around the text */
    margin-top: 20%; /* Top margin */
   }
  </style>
 </head>
 <body>
 
  <div>
   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>
 
 </body>
</html>

The result of this example is shown on the figure 2


Object model

[window.]document.getElementById("elementID").style.marginTop