margin

Baseline Widely available *

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.

La propriété raccourcie CSS margin définit la zone 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 id="default-example">
  <div id="container">
    <div class="row"></div>
    <div class="row transition-all" id="example-element"></div>
    <div class="row"></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 :

Syntaxe

css

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

Avec une valeur, celle-ci s'applique aux quatre côtés.
Avec deux valeurs, la première s'applique en haut et en bas, la seconde à gauche et à droite.
Avec trois valeurs, la première s'applique en haut, la deuxième à droite et à gauche, la troisième en bas.
Avec quatre valeurs, elles s'appliquent en haut, à 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 fonction anchor-size() donne une longueur (<length>) relative à la largeur ou la hauteur de l'élément ancre associé (voir Dé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 par writing-mode) du bloc 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.

Valeur initiale	pour chaque propriété individuelle de la propriété raccourcie : `margin-bottom`: `0` `margin-left`: `0` `margin-right`: `0` `margin-top`: `0`
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ée	non
Pourcentages	se rapporte à la largeur du bloc contenant
Valeur calculée	pour 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'animation	une 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

HTML

html

<div class="centre">Cet élément est centré</div>

<div class="externe">Cet élément est positionné en dehors de son conteneur</div>

CSS

css

.centre {
  margin: auto;
  background: lime;
  width: 66%;
}

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

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