margin

The margin CSS property sets the margin area on all four sides of an element. It is a shorthand for margin-top, margin-right, margin-bottom, and margin-left.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

The top and bottom margins have no effect on non-replaced inline elements, such as <span> or <code>.

Syntax

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

/* 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. Negative values draw the element closer to its neighbors than it would be by default.

• 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 right and left, 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 Flexible Box 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

• Introduction to the CSS basic box model
• Margin collapsing
• margin-top, margin-right, margin-bottom, and margin-left
• The mapped logical properties: margin-block-start, margin-block-end, margin-inline-start, and margin-inline-end and the shorthands margin-block and margin-inline