margin property CSS Reference

---

Definition and Usage

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

---

Compatibility

Desktop browsers

Mobile browsers