This translation is incomplete. Please help translate this article from English.

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;

Initial valueas each of the properties of the shorthand:
Applies toall elements, except elements with table display types other than table-caption, table and inline-table. It also applies to ::first-letter.
Inheritedno
Percentagesrefer to the width of the containing block
Mediavisual
Computed valueas 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 typea length
Canonical orderthe unique non-ambiguous order defined by the formal grammar

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

Especificació Estat Comentari
CSS Basic Box Model
The definition of 'margin' in that specification.
Working Draft No hi ha canvis significatius .
CSS Transitions
The definition of 'margin' in that specification.
Working Draft Defineix margin com animable.
CSS Level 2 (Revision 1)
The definition of 'margin' in that specification.
Recommendation Elimina el seu efecte en elements en línia .
CSS Level 1
The definition of 'margin' in that specification.
Recommendation Definició iniciaI.

Descripció Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Suport bàsic 1.0 (Yes) 1.0 (1.7 or earlier) 3.0 3.5 1.0 (85)
auto value 1.0 ? 1.0 (1.7 or earlier) 6.0 (strict mode) 3.5 1.0 (85)
Descripció Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suport bàsic 1.0 (Yes) 1.0 (1) 6.0 6.0 1.0

Vegeu també

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,