margin

La propietat CSS margin estableix l'àrea del marge en els quatre costats d'un element. És una abreviatura que estableix tots els marges individuals alhora: margin-top, margin-right, margin-bottom i 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;

<div class="grid">
  <div class="col">
    <div class="cell">
      <div class="m m0">margin: 0</div>
    </div>
    <div class="cell">
      <div class="m m1">margin: 1em</div>
    </div>
    <div class="cell">
      <div class="m m2">margin: 5% auto</div>
    </div>
    <div class="cell">
      <div class="m m3">margin: 1em auto 2em</div>
    </div>
    <div class="cell">
      <div class="m m4">margin: 5px 1em 0 auto</div>
    </div>
    <div class="note">All the boxes above have the same width of 50%</div>
  </div>
</div>

html,body {
  height: 100%;
  box-sizing: border-box;
}

.grid {
  width: 100%;
  height: 100%;
  display: flex;
  background: #EEE;
  font: 1em monospace;
}

.col {
  display: flex;
  flex: 1 auto;
  flex-direction: column;
}

.cell {
  box-sizing: border-box;
  margin: .5em;
  padding: 0;
  background-color: #FFF;
  overflow: hidden;
  text-align: center;
}

.note {
  background: #fff3d4;
  padding: 1em;
  margin: .5em;
  font: .8em sans-serif;
  text-align: center;
  flex: none;
}

.m {
  display: block;
  width: 50%;
  text-align: left;
  background: #E4F0F5;
  padding: .5em;
  border: 1px solid;
}

.m0 { margin: 0; }
.m1 { margin: 1em; }
.m2 { margin: 5% auto; }
.m3 { margin: 1em auto 2em; }
.m4 { margin: 5px 1em 0 auto; }

Sintaxi

La propietat margin es pot especificar usant un, dos, tres o quatre valors. Cada valor és un <length>, un <percentage>, o la paraula clau auto. Cada valor pot ser positiu, zero o negatiu.

• Quan s'especifica un valor, s'aplica el mateix marge als quatre costats.
• Quan s'especifiquen dos valors, el primer marge s'aplica a la part superior i inferior, el segon a l'esquerra i a la dreta.
• Quan s'especifiquen tres valors, el primer marge s'aplica a la part superior, el segon a l'esquerra i a la dreta, el tercer a la part inferior.
• Quan s'especifiquen quatre valors, els marges s'apliquen a la part superior, dreta, inferior i esquerra en aquest ordre (en el sentit de les agulles del rellotge).

Valors

length

La grandària del marge com a valor fix.

percentage

La grandària del marge com a percentatge, en relació amb l'amplada del bloc contenidor.

auto

El navegador selecciona un marge adequat per utilitzar-lo. Per exemple, en alguns casos aquest valor es pot utilitzar per centrar un element.

Sintaxi formal

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

Exemples

Exemple senzill

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%;
}

Més exemples

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

Centrat horitzontal

Per centrar alguna cosa horitzontalment en els navegadors moderns, podeu utilitzar display: flex; justify-content: center; .

Tanmateix, en navegadors antics com IE8-9 que no admeten el disseny de flexbox, aquests no estan disponibles. Per centrar un element dins del seu pare, utilitzeu margin: 0 auto; .

Col.lapse del marge

Els marges superior i inferior d'elements solen col·lapsar-se en un únic marge igual al major dels dos marges. Consulteu Dominar el col.lapse del marge per obtenir més informació.

Especificacions

Navegadors compatibles

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Vegeu també

• Model de caixa CSS
• Col.lapse del marge