±ß¾à | margin

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

Applies to all elements, except elements with table [`display`](display) types other than `table-caption`, `table` and `inline-table`. It also applies to [`::first-letter`](::first-letter).   [Inherited](inheritance) no   Percentages refer to the width of the containing block   Media visual   [Computed value](computed_value) as each of the properties of the shorthand:

Animation type a [length](length#Interpolation)    Canonical order the unique non-ambiguous order defined by the formal grammar  

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

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

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

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

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

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