margin

Overview

W3C

Properties

background

background-attachment

The margin property is a shorthand property for setting margin-top, margin-right, margin-bottom, and margin-left.


                                margin: [ <length> | <percentage> | auto ]{1,4} | inherit

Initial:	0
Applies To:	all elements except elements with table display types other than table-caption, table and inline-table
Inherited:	no
Percentages:	refer to width of containing block
Media:	visual

DOM
Example | auto
Example | length
Example | percentage
Example | DOM
References


                                [window.]document.getElementById("element-id").style.margin = "margin-top margin-right margin-bottom margin-left";

<html>
  <head>
    <title>margin</title>
  </head>
  <body>
    <a href="/" onmouseover="mouseover1();">auto</a>
    <a href="/" onmouseover="mouseover2();">length</a>
    <a href="/" onmouseover="mouseover3();">percentage</a><br>
    <a href="/" onmouseover="mouseover4();">top-right-bottom-left</a>
    <a href="/" onmouseover="mouseover5();">top-bottom right-left</a>
    <a href="/" onmouseover="mouseover6();">top right-left bottom</a>
    <a href="/" onmouseover="mouseover7();">top right bottom left</a>
    <h1 id="id1">Header</h1>
    <p id="id2">paragraph</p>
    <p id="id3">paragraph</p>
  </body>
  <script type="text/javascript">
    function mouseover1() {
      document.getElementById("id2").style.margin = "auto";
    }
    function mouseover2() {
      document.getElementById("id2").style.margin = "10px";
    }
    function mouseover3() {
      document.getElementById("id2").style.margin = "10%";
    }
    function mouseover4() {
      document.getElementById("id2").style.margin = "10px";
    }
    function mouseover5() {
      document.getElementById("id2").style.margin = "10px 20px";
    }
    function mouseover6() {
      document.getElementById("id2").style.margin = "10px 20px 30px";
    }
    function mouseover7() {
      document.getElementById("id2").style.margin = "10px 20px 30px 40px";
    }
    document.getElementById("id1").style.backgroundColor = "red";
    document.getElementById("id1").style.margin          = "0";
    document.getElementById("id2").style.backgroundColor = "yellow";
    document.getElementById("id2").style.margin          = "0";
    document.getElementById("id3").style.backgroundColor = "#00ff00";
    document.getElementById("id3").style.margin          = "0";
  </script>
</html>

W3C Cascading Style Sheets, level 1

W3C Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification

CSS

DOM

Example | auto

Example | length

Example | percentage

Example | DOM

References