margin

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.

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

Syntax

The margin property may be specified using one, two, three, or four values. Each value is a <length>, a <percentage>, or the keyword auto.

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

Values

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

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

Browser compatibility

See also

• Margin collapsing