margin

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	as each of the properties of the shorthand: 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. It also applies to ::first-letter.
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
Animation type	a length
Canonical order	the unique non-ambiguous order defined by the formal grammar

Syntax

/* Apply to all four sides */
margin: 1em;

/* vertical | horizontal */
margin: 5% auto;

/* top | horizontal | bottom */
margin: 1em auto 2em; 

/* top | right | bottom | left */
margin: 2px 1em 0 auto;

/* Global values */
margin: inherit;
margin: initial;
margin: unset;

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

Formal syntax

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

Examples

Simple example

HTML

<div class="ex1">
  margin:     auto;
  background: gold;
  width:      66%;
</div>
<div class="ex2">
  margin:     20px 0 0 -20px;
  background: gold;
  width:      66%;
</div>

CSS

.ex1 {
  margin: auto;
  background: gold;
  width: 66%;
}
.ex2 {
  margin: 20px 0px 0 -20px;
  background: gold;
  width: 66%;
}

Another example

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

Horizontal centering with margin: 0 auto;

To center something horizontally in modern browsers, use display: flex; justify-content: center; .

However, in older browsers like IE8-9, these are not available. In order to center an element inside its parent, use margin: 0 auto;

Specifications

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

Browser compatibility

See also

• Margin collapsing