mozilla
Your Search Results

    margin Redirect 1

    Summary

    The margin CSS property sets the margin for all four sides. It is a shorthand to avoid setting each side separately with the other margin properties: margin-top, margin-right, margin-bottom and margin-left.
    Negative values are also allowed.

    • Initial value the concatenation of the initial values of its longhand properties:
      • margin-bottom: 0
      • margin-left: 0
      • margin-right: 0
      • margin-top: 0
    • Applies to all elements except elements with table display types other than table-caption, table and inline-table
    • Inherited no
    • Percentages refer to the width of the containing block
    • Media visual
    • Computed value as each of the properties of the shorthand:
      • margin-bottom: the percentage as specified or the absolute length
      • margin-left: the percentage as specified or the absolute length
      • margin-right: the percentage as specified or the absolute length
      • margin-top: the percentage as specified or the absolute length
    • Animatable yes, as a length
    • Canonical order the unique non-ambiguous order defined by the formal grammar

    Syntax

    Formal syntax: [ <length> | <percentage> | auto ]{1,4}
    margin: style                  /* One-value syntax   */  E.g. margin: 1em; 
    margin: vertical horizontal    /* Two-value syntax   */  E.g. margin: 5% auto; 
    margin: top horizontal bottom  /* Three-value syntax */  E.g. margin: 1em auto 2em; 
    margin: top right bottom left  /* Four-value syntax  */  E.g. margin: 2px 1em 0 auto; 
    
    margin: inherit
    

    Values

    Accepts one, two, three or four values of the following:

    <length>
    Specifies a fixed width. Negative Values are allowed. See for <length> possible units.
    <percentage>
    A <percentage> relative to the width of the containing block. Negative values are allowed.
    auto
    auto is replaced by some suitable value, e.g. it can be used for centering of blocks.
    div { width:50%;  margin:0 auto; } centers the div container horizontally.
    • One single value applies to all four sides.
    • Two values apply first to top and bottom, the second one to left and right.
    • Three values apply first to top, second to left and right and third to bottom.
    • Four values apply to top, right, bottom and left in that order (clockwise).

    Examples

    margin: 5%;                /* all sides 5% margin */
    
    margin: 10px;              /* all sides 10px margin */
    
    margin: 1.6em 20px;        /* top and bottom 1.6em, left and right 20px margin */
    
    margin: 10px 3% 1em;       /* top 10px, left and right 3%, bottom 1em margin */
    
    margin: 10px 3px 30px 5px; /* top 10px, right 3px, bottom 30px, left 5px margin */
    
    margin: 1em auto;          /* 1em margin on top and bottom, box is horizontally centered */
    
    margin: auto;              /* box is horizontally centered, 0 margin on top and bottom */
    
    margin:     auto;
    background: gold;
    width:      66%;
    margin:     -1em 0 100px -40px;
    background: plum;
    width:      20em

    Specifications

    Specification Status Comment
    CSS Basic Box Model Working Draft No significant change.
    CSS Transitions Working Draft Defines margin as animatable.
    CSS Level 2 (Revision 1) Recommendation Removes its effect on inline elements.
    CSS Level 1 Recommendation Initial definition.

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Basic support 1.0 1.0 (1.7 or earlier) 3.0 3.5 1.0 (85)
    auto value 1.0 1.0 (1.7 or earlier) 6.0 (strict mode) 3.5 1.0 (85)
    Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Basic support 1.0 1.0 (1) 6.0 6.0 1.0

    See also

    Document Tags and Contributors

    Contributors to this page: Sheppy
    Last updated by: Sheppy,
    Hide Sidebar