Propriété CSS margin — Syntaxe, valeurs et exemples

La propriété CSS margin crée de l'espace à l'extérieur de la bordure d'un élément — l'écart entre cet élément et ses voisins. Contrairement au padding, qui ajoute de l'espace à l'intérieur de la bordure, la marge repousse le contenu adjacent loin de l'élément.

Cette page couvre la syntaxe raccourcie, le fonctionnement du motif de une à quatre valeurs, le centrage avec auto, les marges négatives et la règle de fusion des marges qui surprend la plupart des débutants.

Ce que margin abrège

La propriété margin est un raccourci qui définit les quatre propriétés de côté individuelles en une seule déclaration :

Le motif de une à quatre valeurs

Puisque margin est un raccourci, le nombre de valeurs fournies détermine les côtés auxquels elles s'appliquent. Les valeurs s'appliquent toujours dans le sens des aiguilles d'une montre en commençant par le haut (haut → droite → bas → gauche) :

Quatre valeurs — margin: 25px 10px 15px 20px; définit haut à 25px, droite à 10px, bas à 15px, gauche à 20px.
Trois valeurs — margin: 15px 10px 20px; définit haut à 15px, droite et gauche à 10px, bas à 20px.
Deux valeurs — margin: 15px 10px; définit haut et bas à 15px, droite et gauche à 10px.
Une valeur — margin: 15px; applique 15px aux quatre côtés.

Un bon moyen mnémotechnique pour la forme à quatre valeurs est le mot TRouBLe (Top, Right, Bottom, Left).

Info

Les valeurs négatives sont valides.

Info

Les marges supérieure et inférieure n'ont aucun effet sur les éléments en ligne, tels que <span> ou <code>.

Valeur initiale	0
S'applique à	Tous les éléments.
Héritée	Non.
Animatable	Oui. La marge est animatable.
Version	CSS1
Syntaxe DOM	Object.style.margin = "20px 10px";

Syntaxe

Syntaxe de la propriété CSS margin

margin: length | auto | initial | inherit;

Exemple de la propriété margin :

Exemple de la propriété CSS margin avec quatre valeurs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        background-color: #1c87c9;
        color: #fff;
        margin: 25px 10px 15px 20px;
      }
    </style>
  </head>
  <body>
    <h2>Margin property example</h2>
    <p>Paragraph with background-color, color and margin properties.</p>
  </body>
</html>

Essayez vous-même »

Résultat

Exemple de la propriété margin où la marge d'un élément est définie à 10% pour tous les côtés :

Exemple de la propriété CSS margin avec une valeur % (pourcentage)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p.example {
        margin: 10%;
      }
    </style>
  </head>
  <body>
    <h2>Margin property example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p class="example">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </body>
</html>

Essayez vous-même »

Exemple de la propriété margin définie en "em" :

Exemple de la propriété CSS margin avec la valeur em

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p.example {
        margin: 4em;
      }
    </style>
  </head>
  <body>
    <h2>Margin property example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p class="example">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </body>
</html>

Essayez vous-même »

Examinons l'exemple suivant qui illustre la différence entre les propriétés margin, padding et border :

Exemple de la propriété margin avec les propriétés padding et border :

Exemple de la propriété CSS margin avec une valeur (px)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        background-color: #eee;
        width: 200px;
        border: 20px solid #8ebf42;
        padding: 30px;
        margin: 55px;
      }
    </style>
  </head>
  <body>
    <h2>Margin property example</h2>
    <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
  </body>
</html>

Essayez vous-même »

Centrer un bloc avec `margin: auto`

Définir les marges gauche et droite à auto est la méthode classique pour centrer horizontalement un élément de niveau bloc qui possède une largeur explicite. Le navigateur répartit l'espace horizontal restant de manière égale entre les deux côtés :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        width: 300px;
        margin: 0 auto;
        background-color: #1c87c9;
        color: #fff;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <div class="box">I am centered horizontally.</div>
  </body>
</html>

margin: 0 auto; signifie des marges supérieure et inférieure à 0 et auto pour la gauche et la droite. Notez que auto ne centre que horizontalement — cela ne centre pas verticalement. Pour un centrage vertical, utilisez Flexbox ou Grid.

Marges négatives

Les marges acceptent des valeurs négatives, ce qui tire un élément vers son voisin (ou vers l'extérieur au-delà de son conteneur) au lieu de l'en éloigner. Cela est utile pour faire se chevaucher des éléments ou décaler un élément au-delà du padding de son parent :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .second {
        margin-top: -20px;
        background-color: #8ebf42;
        color: #fff;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <p>First paragraph.</p>
    <p class="second">This paragraph is pulled up to overlap the one above.</p>
  </body>
</html>

Fusion des marges

Lorsque les marges supérieure et inférieure de deux éléments de bloc se rencontrent verticalement, elles ne s'additionnent pas — elles fusionnent en une seule marge égale à la plus grande des deux. Ainsi, un paragraphe avec margin-bottom: 30px; suivi d'un autre avec margin-top: 20px; produit un écart de 30px entre eux, et non 50px.

Info

La fusion des marges n'affecte que les marges verticales (haut/bas) des boîtes de niveau bloc en flux normal. Les marges gauche et droite ne fusionnent jamais, et les marges des éléments Flex ou Grid ne fusionnent pas.

Valeurs

Valeur	Description	Essayer
auto	Définit la marge. C'est la valeur par défaut de cette propriété.	Essayer »
length	Définit une marge en px, pt, cm, etc. La valeur par défaut est 0.	Essayer »
%	Définit la marge en % de l'élément conteneur.	Essayer »
initial	Fait utiliser à la propriété sa valeur par défaut.	Essayer »
inherit	Hérite la propriété de son élément parent.

Exercice

Pratique

Lesquelles des affirmations suivantes sont vraies concernant les marges CSS ?

Les marges servent à créer de l'espace autour des éléments, à l'extérieur de toute bordure définie.Les marges n'ont pas de propriétés.Avec CSS, vous avez un contrôle total sur les marges.Il existe des propriétés pour définir la marge de chaque côté d'un élément (haut, droite, bas et gauche).Les marges sont toujours transparentes.Vous pouvez utiliser des valeurs négatives pour créer des effets de chevauchement.La propriété margin-clear permet de définir la marge d'un élément.

Ce que margin abrège

Le motif de une à quatre valeurs

Syntaxe

Exemple de la propriété margin :

Résultat

Exemple de la propriété margin où la marge d'un élément est définie à 10% pour tous les côtés :

Exemple de la propriété margin définie en "em" :

Exemple de la propriété margin avec les propriétés padding et border :

Centrer un bloc avec margin: auto

Marges négatives

Fusion des marges

Valeurs

Exercice

Centrer un bloc avec `margin: auto`