margin-bottom

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-bottom

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


Syntax

margin-bottom: value | auto

Arguments
You can specify size of the bottom 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
26
27
28
29
30
31
32
33
34

<!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-bottom</title>
  <style type="text/css">
   .layer1 {
    background: #008B66; /* Background color */
    color: white;  /* Text color */
    padding: 10px;  /* Areas around the text */
    margin-bottom: -7px; /* Bottom margin */
   }
   .layer2 {
    margin-left: 40px;  /* Left margin */
    background: #ccc;  /* Background color */
    padding: 10px; /* Areas around the text*/
   }
  </style>
 </head> 
 <body> 
 
  <div class="layer1">
   <big>Lorem ipsum dolor sit amet</big>
  </div> 
 
  <div class="layer2">
   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.marginBottom