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.
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
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
/* 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 conteneurdiv
horizontalement).
Syntaxe formelle
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
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. |
Valeur initiale | pour 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 et ::first-line . |
Héritée | non |
Pourcentages | se rapporte à la largeur du bloc contenant |
Valeur calculée | pour chaque propriété individuelle de la propriété raccourcie :
|
Type d'animation | une longueur |
Compatibilité des navigateurs
BCD tables only load in the browser