margin

  • Revision slug: CSS/margin
  • Revision title: margin
  • Revision id: 25864
  • Created:
  • Creator: Offshore
  • Is current revision? No
  • Comment /* Examples */

Revision Content

{{ CSSRef() }}

Summary

margin property of an element set the margin space required on all side of an element. It is shortcut to avoid setting each side separately. Negative value are also allowed.

  • {{ Xref_cssinitial() }}: 0
  • Applies to: all elements except those with table display types other than table-caption, table, and inline-table
  • {{ Xref_cssinherited() }}: no
  • Percentages: refer to {{ Cssxref("height") }} or {{ Cssxref("width") }} of closest block-level ancestor
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: the percentage as specified or the absolute length

Syntax

margin: {{ Xref_csslength() }} {1,4} | {{ Xref_csspercentage() }} {1,4} | {{ Cssxref("inherit") }} | {{ Cssxref("auto") }};

Values

<length>
Specifies a fixed height or width.
<percentage>
a percentage with respect to the height or width of the containing block.
  • If there is only one value, it indicate all four sides
  • when there are two values first one indicates top and bottom, second one indicates left and right.
  • when there are three values first one indicate top, second one indicates left and right, third one indicate bottom.
  • when there are for values first one indicate top, second one indicates right, third one indicate bottom, fourth indicates left.

Examples

{{ CSSRefExampleLink("margin") }} {{ Fixeg() }}

  .content {
    margin: 5%;  /* all sides 5% margin*/
  }

  .sidebox {
    margin: 10px;  /* all sides 10px margin*/
  } 

  .rightbox {
    margin: 10px 20px;  /*  top and bottom 10px margin  */
  }                     /*  left and right 20px margin  */


  .leftbox {               /*  top 10px margin  */
    margin: 10px 3% 20px;  /*  left and right 3% margin  */
  }                        /*  bottom 20px margin  */


  .mainbox {                    /*  top 10px margin  */
     margin: 10px 3px 30px 5px; /*  right 3px margin  */
  }                             /*  bottom 30px margin  */
                                /*  left 5px margin  */ 

Notes

Specifications

Browser compatibility

{{ Fixbrowser() }}

Browser Lowest Version
Internet Explorer ?
Firefox ?
Netscape ?
Opera ?
Safari ?

See also

{{ CSS_Reference:Margin() }}

Revision Source

<p> {{ CSSRef() }}
</p>
<h3 name="Summary"> Summary </h3>
<p><b><code>margin</code></b> property of an element set the margin space required on all side of an element. It is shortcut to avoid setting each side separately. Negative value are also allowed.
</p>
<ul><li> {{ Xref_cssinitial() }}: 0
</li><li> Applies to: all elements except those with table display types other than <code>table-caption</code>, <code>table</code>, and <code>inline-table</code>
</li><li> {{ Xref_cssinherited() }}: no </li><li> Percentages: refer to {{ Cssxref("height") }} or {{ Cssxref("width") }} of closest block-level ancestor
</li><li> Media: {{ Xref_cssvisual() }}
</li><li> {{ Xref_csscomputed() }}: the percentage as specified or the absolute length
</li></ul>
<h3 name="Syntax"> Syntax </h3>
<pre class="eval">margin: {{ Xref_csslength() }} {1,4} | {{ Xref_csspercentage() }} {1,4} | {{ Cssxref("inherit") }} | {{ Cssxref("auto") }};
</pre>
<h3 name="Values"> Values </h3>
<dl><dt>&lt;length&gt;</dt><dd> Specifies a fixed height or width. </dd><dt>&lt;percentage&gt;</dt><dd> a percentage with respect to the height or width of the containing block. </dd></dl>
<ul><li> If there is only one value, it indicate all four sides
</li><li> when there are two values first one indicates top and bottom, second one indicates left and right.
</li><li> when there are three values first one indicate top, second one indicates left and right, third one indicate bottom.
</li><li> when there are for values first one indicate top, second one indicates right, third one indicate bottom, fourth indicates left.
</li></ul>
<h3 name="Examples"> Examples </h3>
<p>{{ CSSRefExampleLink("margin") }} {{ Fixeg() }}
</p>
<pre>  .content {
    margin: 5%;  /* all sides 5% margin*/
  }

  .sidebox {
    margin: 10px;  /* all sides 10px margin*/
  } 

  .rightbox {
    margin: 10px 20px;  /*  top and bottom 10px margin  */
  }                     /*  left and right 20px margin  */


  .leftbox {               /*  top 10px margin  */
    margin: 10px 3% 20px;  /*  left and right 3% margin  */
  }                        /*  bottom 20px margin  */


  .mainbox {                    /*  top 10px margin  */
     margin: 10px 3px 30px 5px; /*  right 3px margin  */
  }                             /*  bottom 30px margin  */
                                /*  left 5px margin  */ 

</pre>
<h3 name="Notes"> Notes </h3>
<h3 name="Specifications"> Specifications </h3>
<ul><li> <a class="external" href="http://www.w3.org/TR/CSS1#margin">CSS 1</a>
</li><li> <a class="external" href="http://www.w3.org/TR/CSS21/box.html#margin-properties">CSS 2.1 box</a>
</li><li> <a class="external" href="http://www.w3.org/TR/css3-box/#the-margin">CSS 3 box</a>
</li></ul>
<h3 name="Browser_compatibility"> Browser compatibility </h3>
<p>{{ Fixbrowser() }}
</p>
<table class="standard-table"> <tbody><tr> <th>Browser</th> <th>Lowest Version</th> </tr> <tr> <td>Internet Explorer</td> <td>?</td> </tr> <tr> <td>Firefox</td> <td>?</td> </tr> <tr> <td>Netscape</td> <td>?</td> </tr> <tr> <td>Opera</td> <td>?</td> </tr> <tr> <td>Safari</td> <td>?</td> </tr>
</tbody></table>
<h3 name="See_also"> See also </h3>
<p>{{ CSS_Reference:Margin() }}
</p>
Revert to this revision