margin

The margin CSS property sets the margin area on all four sides of an element. It is a shorthand that sets all individual margins at once: margin-top, margin-right, margin-bottom, and margin-left.

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;

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

• When one value is specified, it applies the same margin to all four sides.
• When two values are specified, the first margin applies to the top and bottom, the second to the left and right.
• When three values are specified, the first margin applies to the top, the second to the left and right, the third to the bottom.
• When four values are specified, the margins apply to the top, right, bottom, and left in that order (clockwise).

Values

<length>

The size of the margin as a fixed value.

<percentage>

The size of the margin as a percentage, relative to the width of the containing block.

auto

The browser selects a suitable margin to use. For example, in certain cases this value can be used to center an element.

Formal syntax

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

Examples

Simple example

HTML

<div class="center">This element is centered.</div>

<div class="outside">This element is positioned outside of its container.</div>

CSS

.center {
  margin: auto;
  background: lime;
  width: 66%;
}

.outside {
  margin: 3rem 0 0 -3rem;
  background: cyan;
  width: 66%;
}

More examples

margin: 5%;                 /* all sides: 5% margin */

margin: 10px;               /* all sides: 10px margin */

margin: 1.6em 20px;         /* top and bottom: 1.6em margin */
                            /* left and right: 20px margin  */

margin: 10px 3% 1em;        /* top:            10px margin */
                            /* left and right: 3% margin   */
                            /* bottom:         1em margin  */

margin: 10px 3px 30px 5px;  /* top:    10px margin */
                            /* right:  3px margin  */
                            /* bottom: 30px margin */
                            /* left:   5px margin  */

margin: 2em auto;           /* top and bottom: 2em margin   */
                            /* box is horizontally centered */

margin: auto;               /* top and bottom: 0 margin     */
                            /* box is horizontally centered */

Notes

Horizontal centering

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

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

Margin collapsing

Elements' top and bottom margins are sometimes collapsed into a single margin that is equal to the larger of the two margins. See Mastering margin collapsing for more information.

Specifications

Browser compatibility

See also

• CSS Box Model
• Margin collapsing