margin

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

La propriété margin définit 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 et margin-left.

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

Exemple interactif

Les marges haute et basse n'ont aucun effet sur les élements en ligne (inline) qui ne sont pas remplacés (par exemple les <span> ou <code>).

Note : Les marges créent un espace supplémentaire à l'extérieur de l'élément. Le « remplissage » (padding) permet quant à lui de créer un espace supplémentaire à l'intérieur de l'élément.

Syntaxe

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

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. Les valeurs négatives permette de dessiner l'élément plus près de ses voisins que ne l'aurait permis la valeur par défaut.

  • 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).

Définition formelle

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
Valeur calculéepour chaque propriété individuelle de la propriété raccourcie :
  • margin-bottom: le pourcentage tel que spécifié ou une longueur absolue
  • margin-left: le pourcentage tel que spécifié ou une longueur absolue
  • margin-right: le pourcentage tel que spécifié ou une longueur absolue
  • margin-top: le pourcentage tel que spécifié ou une longueur absolue
Type d'animationune longueur

Syntaxe formelle

margin = 
<'margin-top'>{1,4}

<margin-top> =
<length-percentage> |
auto |
<anchor-size()>

<length-percentage> =
<length> |
<percentage>

<anchor-size()> =
anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )

<anchor-name> =
<dashed-ident>

<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline

Exemples

Exemple simple

CSS

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

HTML

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

css
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

Specification
CSS Box Model Module Level 3
# margin

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
margin
anchor-size()
Experimental
auto

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.

Voir aussi