Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

La propriété margin permet de définir la taille des marges sur les quatre côtés de l'élément. C'est une propriété raccourcie qui permet de manipuler les autres propriétés de marges : margin-top, margin-right, margin-bottom and margin-left.

Il est possible d'utiliser des valeurs négatives pour chacun des côtés.

Valeur initialepour chaque propriété individuelle de la propriété raccourcie :
Applicabilitétous les éléments exceptés ceux dont les types display pour les tableaux ne sont pas table-caption, table et inline-table. S'applique aussi à ::first-letter.
Héritéenon
Pourcentagesse rapporte à la largeur du bloc contenant
Médiavisuel
Valeur calculéepour chaque propriété individuelle de la propriété raccourcie :
  • margin-bottom: le pourcentage tel que spécifé ou une longeur absolue
  • margin-left: le pourcentage tel que spécifé ou une longeur absolue
  • margin-right: le pourcentage tel que spécifé ou une longeur absolue
  • margin-top: le pourcentage tel que spécifé ou une longeur absolue
Animableoui, comme une longueur
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

/* La propriété s'applique aux quatre côtés */
margin: 1em;

/* vertical | horizontal */
margin: 5% auto;

/* haut | horizontal | bas */
margin: 1em auto 2em; 

/* haut | droit | bas | gauche */
margin: 2px 1em 0 auto;

/* Valeurs globales */
margin: inherit;
margin: initial;
margin: unset;

Valeurs

Cette propriété peut accepter une, deux, trois ou quatre valeurs avec les types suivants :

<length>
La marge est définie avec une valeur absolue. On peut utiliser des valeurs négatives. Pour les différentes unités possibles, voir la page <length>.
<percentage>
Une valeur relative, exprimée en pourcentage (type <percentage>, à la largeur du bloc englobant. On peut utiliser des valeurs négatives.
auto
auto est remplacé par une valeur adaptée (il peut être utilisé pour centrer les blocs, par exemple, div { width:50%;  margin:0 auto; } permet de centrer un conteneur div horizontalement).

Cardinalité de la propriété raccourcie

  • Une valeur appliquera la même marge aux quatre côtés.
  • Deux valeurs appliqueront la première en haut et en bas et la seconde sur les côtés gauche et droit.
  • Trois valeurs appliqueront la première en haut, la deuxième à gauche et à droite, la troisième sera appliquée en bas.
  • Quatre valeurs s'appliqueront respectivement en haut, à droite, en bas et à gauche.

Syntaxe formelle

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

Exemples

Exemple simple

CSS

.ex1 {
  margin: auto;
  background: gold;
  width: 66%;
}
.ex2 {
  margin: 20px 0px 0 -20px;
  background: gold;
  width: 66%;
}

HTML

<div class="ex1">
  margin:     auto;
  background: gold;
  width:      66%;
</div>
<div class="ex2">
  margin:     20px 0 0 -20px;
  background: gold;
  width:      66%;
</div>

Résultat

Autres exemples

margin: 5%;                /* tous les côtés avec une marge de 5% */
margin: 10px;              /* tous les côtés avec une marge de 10px */
             
margin: 1.6em 20px;        /* haut et bas à 1.6em     */
                           /* gauche et droite à 20px */

margin: 10px 3% 1em;       /* haut à 10px, gauche et droite à 3% */
                           /* bas à 1em */

margin: 10px 3px 30px 5px; /* haut à 10px, droite à 3px */
                           /* bas à 30px, gauche à 5px  */

margin: 1em auto;          /* marge de 1em en haut et en bas       */
                           /* la boîte est centrée horizontalement */

margin: auto;              /* boîte centrée horizontalement */
                           /* marge nulle en haut et en bas */

Centrer horizontalement avec margin: 0 auto;

Afin de centrer un élément horizontalement, avec un navigateur « moderne » on peut utiliser display: flex; justify-content: center; .

Les anciens navigateurs comme IE8-9 ne gère pas ces valeurs. Aussi, il faudra utiliser margin: 0 auto pour centrer un élément au sein de son parent.

Spécifications

Spécification État Commentaires
CSS Basic Box Model
La définition de 'margin' dans cette spécification.
Version de travail Aucun changement significatif.
CSS Transitions
La définition de 'margin' dans cette spécification.
Version de travail margin peut désormais être animée.
CSS Level 2 (Revision 1)
La définition de 'margin' dans cette spécification.
Recommendation Retrait de l'effet sur les éléments en ligne (inline).
CSS Level 1
La définition de 'margin' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support simple 1.0 1.0 (1.7 ou moins) 3.0 3.5 1.0 (85)
auto 1.0 1.0 (1.7 ou moins) 6.0 (strict mode) 3.5 1.0 (85)
Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple 1.0 1.0 (1) 6.0 6.0 1.0

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, mrstork, Sebastianz, teoli, FredB, the prisoner, tcit
 Dernière mise à jour par : SphinxKnight,