margin
======

The **`margin`** CSS shorthand property sets the margin area on all four sides of an element.

Try it
------

Constituent properties
----------------------

This property is a shorthand for the following CSS properties:

* `margin-top`
* `margin-right`
* `margin-bottom`
* `margin-left`
Syntax
------


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

/\* top and bottom | left and right \*/
margin: 5% auto;

/\* top | left and right | bottom \*/
margin: 1em auto 2em;

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

/\* Global values \*/
margin: inherit;
margin: initial;
margin: revert;
margin: revert-layer;
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 inline size (*width* in a horizontal language, defined by `writing-mode`) 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.

Description
-----------

This property can be used to set a margin on all four sides of an element. Margins create extra space *around* an element, unlike `padding`, which creates extra space *within* an element.

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

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

Formal definition
-----------------

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

Formal syntax
-------------
```

margin =   
  <'margin-top'>{1,4}    
  
```

Examples
--------

### Simple example

#### HTML


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

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


#### CSS


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

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

### More examples


```css
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 \*/
```

Specifications
--------------

| Specification |
| --- |
| CSS Box Model Module Level 3 # margin |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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`