Lapropriété raccourcieCSSmargin définit lazone de marge sur les quatre côtés d'un élément.

Exemple interactif

margin: 1em;

margin: 5% 0;

margin: 10px 50px 20px;

margin: 10px 50px 20px 0;

margin: 0;

<section>  <div>    <div></div>    <div></div>    <div></div>  </div></section>

#container {  width: 300px;  height: 200px;  display: flex;  align-content: flex-start;  flex-direction: column;  justify-content: flex-start;}.row {  height: 33.33%;  display: inline-block;  border: solid #ce7777 10px;  background-color: #2b3a55;  flex-shrink: 0;}#example-element {  border: solid 10px #ffbf00;  background-color: #2b3a55;}

Propriétés constitutives

Cette propriété est une propriété raccourcie pour les propriétés CSS suivantes :

• margin-top
• margin-right
• margin-bottom
• margin-left

Syntaxe

/* La propriété s'applique aux quatre côtés */margin: 1em;margin: -3px;/* vertical | horizontal */margin: 5% auto;/* haut | horizontal | bas */margin: 1em auto 2em;/* haut | droit | bas | gauche */margin: 2px 1em 0 auto;/* Valeurs de fonction anchor-size() */margin: 5% anchor-size(width);margin: calc(anchor-size(width) / 4) 1em 0  anchor-size(--my-anchor self-inline, 50px);/* Valeurs avec un mot-clé */margin: auto;/* Valeurs globales */margin: inherit;margin: initial;margin: revert;margin: revert-layer;margin: unset;

La propriétémargin peut être définie avec une, deux, trois ou quatre valeurs. Chaque valeur est une<length>, une<percentage> ou le mot-cléauto. Les valeurs négatives rapprochent l'élément de ses voisins plus que la valeur par défaut ne le permettrait.

• Avecune valeur, celle-ci s'applique auxquatre côtés.
• Avecdeux valeurs, la première s'applique enhaut et en bas, la seconde àgauche et à droite.
• Avectrois valeurs, la première s'applique enhaut, la deuxième àdroite et à gauche, la troisième enbas.
• Avecquatre valeurs, elles s'appliquent enhaut,à droite,en bas età gauche dans cet ordre (sens des aiguilles d'une montre).

Valeurs

<length>

La taille de la marge en valeur fixe.

• Pour les éléments positionnés par ancre, la fonctionanchor-size() donne une longueur (<length>) relative à la largeur ou la hauteur de l'élément ancre associé (voirDéfinir la marge d'un élément selon la taille de l'ancre).

<percentage>

La taille de la marge en pourcentage, relative à la taille en ligne (largeur dans une langue horizontale, définie parwriting-mode) dubloc englobant.

auto

Le navigateur choisit une marge adaptée. Par exemple, dans certains cas, cette valeur peut être utilisée pour centrer un élément.

Description

Cette propriété permet de définir une marge sur les quatre côtés d'un élément. Les marges créent un espace supplémentaireautour d'un élément, contrairement àpadding, qui crée un espace supplémentaireà l'intérieur de l'élément.

Les marges haute et basse n'ont aucun effet sur les éléments en lignenonremplacés, comme<span> ou<code>.

Centrage horizontal

Vous pouvez centrer horizontalement un élément dans son parent en appliquantmargin: 0 auto;.

Une méthode plus courante pour centrer un élément horizontalement consiste à utiliserdisplay: flex; etjustify-content: center; sur un conteneur, ce quicentre ses enfants flexibles.

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. VoirMaîtriser la fusion des marges pour plus d'informations.

Définition formelle

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

HTML

<div>Cet élément est centré</div><div>Cet élément est positionné en dehors de son conteneur</div>

CSS

.centre {  margin: auto;  background: lime;  width: 66%;}.externe {  margin: 3rem 0 0 -3rem;  background: cyan;  width: 66%;}

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 de marge *//* gauche et droite à 3% de marge *//* bas à 1em de marge */margin: 10px 3px 30px 5px; /* haut à 10px de marge *//* droite à 3px de marge *//* bas à 30px de marge *//* gauche à 5px de marge */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 */

Spécifications

Compatibilité des navigateurs

Voir aussi

• Les propriétésmargin-top,margin-right,margin-bottom etmargin-left
• Les propriétésmargin-block-start,margin-block-end,margin-inline-start etmargin-inline-end
• Les propriétés raccourciesmargin-block etmargin-inline
• Maîtriser la fusion des marges
• Le guided'introduction au modèle de boîte CSS
• Le modulemodèle de boîte CSS