W3docs
fr
Se connecter

CSS Margin

Utilisez la propriété CSS margin pour créer de l'espace autour du contenu d'un élément HTML en dehors des bordures. Les propriétés sont top, bottom, left et right.

La propriété CSS margin crée de l'espace autour d'un élément — en dehors de sa bordure. Contrairement au padding, qui ajoute de l'espace à l'intérieur de la bordure (entre le contenu et la bordure), la marge repousse les éléments voisins. La marge est toujours transparente : elle n'affiche jamais de couleur d'arrière-plan, elle ne fait qu'ajouter de l'espace vide.

Ce chapitre couvre les quatre propriétés de côté individuelles, le raccourci margin (de une à quatre valeurs), les valeurs spéciales auto et inherit, le calcul des marges en pourcentage, les marges négatives, et la règle de fusion des marges qui surprend presque tout le monde la première fois qu'on la rencontre.

Les côtés individuels

Grâce aux propriétés suivantes, vous pouvez définir la marge de chaque côté d'un élément :

Il est déjà évident que pour le haut on utilise margin-top, pour le bas margin-bottom, pour le côté gauche margin-left, et pour la droite margin-right.

Toutes les propriétés de marge acceptent les valeurs suivantes :

  • auto - la marge est calculée par le navigateur (utilisé pour centrer les éléments de bloc horizontalement),
  • length - spécifie une marge en px, pt, cm, rem, em, etc.,
  • % - spécifie une marge en pourcentage de la largeur de l'élément conteneur,
  • inherit - indique que la marge doit être héritée de son élément parent.

Un détail subtil mais important : les marges en pourcentage sont toujours relatives à la largeur du bloc conteneur, même pour margin-top et margin-bottom. Ainsi, margin-top: 10% à l'intérieur d'un conteneur de 600px de large correspond à 60px, et non à 10% de la hauteur.

La marge peut également prendre des valeurs négatives, qui rapprochent un élément de ses voisins (ou le superposent à eux). Voir Marges négatives ci-dessous.

La propriété margin comme raccourci

La propriété CSS margin est une propriété raccourci pour les propriétés de marge individuelles ci-dessous :

Lorsque la propriété margin a quatre valeurs différentes, voici à quoi cela ressemble dans le code :

CSS marges différentes

p {
  margin-top: 25px;
  margin-right: 10px;
  margin-bottom: 15px;
  margin-left: 20px;
}

Si tous les côtés ont la même valeur, par exemple 50px, en CSS on peut l'écrire ainsi.

CSS même marge, code

p {
  margin: 50px;
}

Lorsque les côtés haut et bas ont la même valeur (par exemple, 15px) et les côtés gauche et droit ont la même valeur (par exemple, 10px), vous pouvez utiliser le code suivant.

CSS margin avec 2 nombres, code

p {
  margin: 15px 10px;
}

Ceci est équivalent à :

CSS margin avec 2 nombres, version longue, code

p {
  margin-top: 15px;
  margin-right: 10px;
  margin-bottom: 15px;
  margin-left: 10px;
}

Lorsque les côtés gauche et droit sont identiques (par exemple, 15px), le côté haut est 5px, et le côté bas est 10px, vous pouvez écrire :

CSS margin avec 3 nombres, code

p {
  margin: 5px 15px 10px;
}

Ceci est équivalent à :

CSS margin avec 3 nombres, version longue, code

p {
  margin-top: 5px;
  margin-right: 15px;
  margin-bottom: 10px;
  margin-left: 15px;
}

Exemple de la propriété margin :

Code de la propriété CSS margin

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        background-color: #1c87c9;
        color: white;
        margin: 25px 10px 15px 20px;
      }
    </style>
  </head>
  <body>
    <p>Paragraph with background-color, color and margin properties.</p>
  </body>
</html>
Essayez vous-même »

Résultat

Propriété CSS Margin

La valeur auto de la propriété margin

Vous pouvez centrer horizontalement un élément dans son conteneur en définissant la propriété margin sur auto. L'élément occupera alors sa largeur définie, et l'espace restant sera réparti également entre les marges droite et gauche.

Exemple de la propriété margin avec la valeur "auto" :

Exemple d'utilisation de la valeur "auto" de la propriété margin :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 300px;
        margin: auto;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <h2>The auto value</h2>
    <p>
      Setting the “auto” value of the margin property you can horizontally center the element inside its container. As a result, the element will take up the defined width and the space that remains, will be divided between the right and left margins.
    </p>
    <div>
      The auto value horizontally centered this div.
    </div>
  </body>
</html>
Essayez vous-même »

La valeur inherit de la propriété margin

Dans l'exemple ci-dessous, la marge gauche de l'élément <p> est héritée de son élément parent (<div>) :

Exemple de la propriété margin avec la valeur "inherit" :

Exemple d'utilisation de la valeur "inherit" de la propriété margin

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        background-color: lightblue;
        margin-left: 100px;
      }
      p.inherit {
        margin-left: inherit;
        padding: 10px 0;
      }
    </style>
  </head>
  <body>
    <h2>The inherit value</h2>
    <p>
      Here the left margin is inherited from its parent element:
    </p>
    <div>
      <p class="inherit">
        With the help of the "inherit" value, the left margin is inherited from the div element.
      </p>
    </div>
  </body>
</html>
Essayez vous-même »

Fusion des marges

Lorsque deux marges verticales se rencontrent, elles ne s'additionnent pas — elles fusionnent en une seule marge égale à la plus grande des deux. C'est la surprise la plus courante avec les marges : si un paragraphe a margin-bottom: 30px et que le suivant a margin-top: 20px, l'écart entre eux est 30px, et non 50px.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .top    { margin-bottom: 30px; background: #1c87c9; color: #fff; }
      .bottom { margin-top: 20px;    background: #2eae44; color: #fff; }
    </style>
  </head>
  <body>
    <p class="top">My bottom margin is 30px.</p>
    <p class="bottom">My top margin is 20px. The gap between us is 30px, not 50px.</p>
  </body>
</html>

Quelques règles à retenir :

  • Seules les marges haut et bas fusionnent. Les marges gauche et droite (horizontales) ne fusionnent jamais — elles s'additionnent toujours.
  • Un parent et son premier/dernier enfant peuvent fusionner leurs marges à moins qu'un élément ne les sépare (une bordure, un padding, overflow autre que visible, ou un conteneur flex/grid).
  • Les éléments vides fusionnent leurs marges haut et bas en une seule.

Si vous avez besoin d'un écart garanti, préférez padding, une bordure, ou utilisez une mise en page flex/grid avec gap — les marges à l'intérieur des conteneurs flex et grid ne fusionnent pas.

Marges négatives

Une marge négative tire un élément dans la direction de la marge, chevauchant souvent un voisin. Un margin-top ou margin-left négatif déplace l'élément lui-même ; un margin-right ou margin-bottom négatif rapproche le contenu suivant.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        background-color: #1c87c9;
        color: #fff;
        padding: 10px;
      }
      .pulled {
        margin-top: -15px;
      }
    </style>
  </head>
  <body>
    <div class="box">First box</div>
    <div class="box pulled">This box is pulled 15px up to overlap the first one.</div>
  </body>
</html>

Les marges négatives sont pratiques pour superposer des cartes, faire sortir un élément du padding de son conteneur, ou affiner un alignement — mais utilisez-les avec parcimonie, car elles peuvent créer des chevauchements difficiles à déboguer.

Propriétés de marge logiques

Le CSS moderne propose également des propriétés logiques qui suivent la direction d'écriture du texte plutôt que les côtés physiques de l'écran — utiles pour les sites qui prennent en charge les langues de gauche à droite et de droite à gauche :

  • margin-inline-start / margin-inline-end — le début/la fin de l'axe en ligne (texte),
  • margin-block-start / margin-block-end — le début/la fin de l'axe de bloc,
  • les raccourcis margin-inline et margin-block (par ex. margin-inline: auto pour centrer horizontalement en LTR et RTL).

Sur une page standard de gauche à droite, margin-inline-start se comporte comme margin-left et margin-block-start comme margin-top, mais ils s'inversent automatiquement pour les contenus de droite à gauche.

Chapitres associés

Entraînement

Pratique
Quelles propriétés peut-on définir avec CSS Margin ?
Quelles propriétés peut-on définir avec CSS Margin ?
Was this page helpful?