w3docs logo

Propriété CSS margin

La propriété en CSS margin crée un espace autour de l'élément.

La propriété margin est une propriété raccourcie pour les propriétés suivantes:

On peut utiliser la propriété margin pour tous les côtés (supérieur, inférieur, gauche, droit) à la fois. Pour le côté supérieur, on utilise margin-top, pour l'inférieur margin-bottom, pour le gauche margin-left et pour le côté droit margin-right.

La propriété margin peut être spécifiée en utilisant une, deux, trois ou quatre valeurs:

  • margin : 25px 10px 15px 20px. Ce code signifie que la marge sur le côte supérieur doit être 25px, sur le côté droit 10px, sur le côté inférieur 15px et sur le côté gauche 20px.
  • margin: 15px 10px 20px. Cela signifie que la marge sur le côté supérieur doit être 15px, sur le côté gauche et sur le côté droit 10px, et sur le côté inférieur 20px.
  • margin: 15px 10px. Ce code signifie que les marges supérieure et inférieure sont 15px, les marges droite et gauche sont 10px.
  • Si la marge n'a q'une valeur, elle est appliquée à tous les quatre côtés.
Valeurs négatives sont valides.
Valeur initiale 0
Appliquée à Tous les éléments.
Héritée Non.
Animable Oui. Le contour est animable.
Version CSS1
Syntaxe DOM Object.style.margin = "20px 10px";

Syntaxe

margin: length | auto | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      p {
      background-color: #1c87c9;
      color: #fff;
      margin: 25px 10px 15px 20px;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété margin</h2>
    <p>Paragraphe avec les propriétés background-color, color et margin.</p>
  </body>
</html>

Ici la marge de l'élément est définie à 10% pour tous les côtés:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      p.example {
      margin: 10%;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété margin</h2>
    <p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.</p>
    <p class="example">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.</p>
    <p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.</p>
  </body>
</html>

Un autre exemple, dans lequel la marge de l'élément est spécifiée par "em":

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      p.example {
      margin: 4em;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété margin</h2>
    <p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.</p>
    <p class="example">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.</p>
    <p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.</p>
  </body>
</html>

Jetons un coup d’œil sur l'exemple suivant qui montre la différence entre les propriétés margin, padding et border:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div {
      background-color: #eee;
      width: 200px;
      border: 20px solid #8ebf42;
      padding: 30px;
      margin: 55px;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété margin</h2>
    <div>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte.</div>
  </body>
</html>

Valeurs

Valeur Description
auto Définit la marge. C'est la valeur initiale de cette propriété.
length Définit une marge en px, pt, cm, etc. Valeur initiale est 0.
% Définit la marge en % de l'élément contenu.
initial Fait utiliser la valeur initiale.
inherit Hérite la propriété de son élément parent.

Support de Navigateurs

chrome firefox safari opera
1.0+ 1.0+ 1.0+ 3.5+

Pratiquez vos connaissances

Quelle est la fonction de la propriété 'margin' en CSS ?
Trouvez-vous cela utile?