Skip to main content

Visit Mozilla.org

CSS:margin

From MDC

« CSS Reference

[edit] 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.

[edit] Syntax 

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

[edit] 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.

[edit] Examples

View Live Examples 

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

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

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


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


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

[edit] Notes

[edit] Specifications

[edit] Browser compatibility

(FIXME)

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

[edit] See also

margin, margin-bottom, margin-left, margin-right, margin-top , -moz-margin-start, -moz-margin-end, border, padding

Retrieved from "http://developer.mozilla.org/en/docs/CSS:margin"