margin

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.

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

Syntaxe

La propriété margin peut être définie grâce à une, deux, trois ou quatre valeurs. Chaque valeur est une valeur de type <length> ou de type <percentage> ou est le mot-clé auto.

• Avec une valeur, celle-ci définira la marge pour les quatre côtés de la boîte
• Avec deux valeurs, la première s'appliquera aux côtés haut et bas et la seconde aux côtés gauche et droit
• Avec trois valeurs, la première s'appliquera au côté haut, la deuxième aux côtés gauche et droit et la troisième au côté bas
• Avec quatre valeurs, la première s'appliquera en haut, la deuxième à droite, la troisième en bas et la quatrième à gauche (ce qui correspond au sens des aiguilles d'une montre - c'est plus facile à mémoriser).

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

Notes

Centrer horizontalement

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èrent pas ces valeurs. Aussi, il faudra utiliser margin: 0 auto pour centrer un élément au sein de son parent.

Fusion des marges

Les marges haute et basse des éléments sont parfois fusionnées en une seule marge qui est égale à la plus grande des deux marges. Pour plus d'informations, lire l'article sur la fusion des marges.

Spécifications

Compatibilité des navigateurs

Voir aussi

• Fusion des marges