Propriété CSS margin-bottom

La propriété CSS margin-bottom définit l'espace en dessous d'un élément, entre son bord inférieur et l'élément suivant dans le flux. La marge est transparente : elle repousse le contenu voisin mais ne porte jamais d'arrière-plan ni de bordure propre. Cette page couvre la syntaxe, les unités acceptées, la règle importante — et parfois surprenante — de la fusion des marges, ainsi que la relation entre margin-bottom et les autres propriétés de marge.

Utilisez margin-bottom chaque fois que vous souhaitez ajouter un espace vertical après un élément — par exemple, pour espacer des paragraphes empilés, séparer un titre du texte qui le suit, ou laisser un espace sous une carte.

Info

Les valeurs négatives sont valides (par ex. margin-bottom: -10px;) et remontent l'élément suivant vers le haut, permettant un chevauchement.

Info

margin-bottom n'a aucun effet sur les éléments inline non remplacés tels que <span> ou <a>. Pour leur appliquer une marge verticale, définissez d'abord display: inline-block ou display: block.

margin-bottom est l'un des quatre côtés contrôlés par la propriété raccourcie margin ; son homologue vertical est margin-top.

Valeur initiale	0
S'applique à	Tous les éléments. S'applique également à ::first-letter.
Hérité	Non.
Animatable	Oui. La marge inférieure de l'élément est animatable.
Version	CSS2
Syntaxe DOM	object.style.marginBottom = "70px";

Syntaxe

Syntaxe de la propriété CSS margin-bottom

margin-bottom: length | percentage | auto | initial | inherit;

Vous pouvez exprimer la valeur de plusieurs façons :

length — une taille fixe en px, em, rem, pt, cm, etc. em est relatif à la taille de police de l'élément lui-même, rem à la taille de police de la racine.
percentage — une fraction de la largeur du bloc conteneur (et non de sa hauteur), ainsi une marge inférieure en % s'adapte à la largeur du parent.
auto — le navigateur calcule la valeur ; pour margin-bottom, cela se résout presque toujours à 0.
initial / inherit — réinitialise à la valeur par défaut (0) ou copie la valeur du parent.

Exemple de la propriété margin-bottom :

Exemple de la propriété CSS margin-bottom avec une valeur en px

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .bottom {
        margin-bottom: 100px;
      }
    </style>
  </head>
  <body>
    <h2>Margin-bottom property example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p class="bottom">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 »

Résultat

Exemple de la propriété margin-bottom définie à "4em" :

Exemple de la propriété CSS margin-bottom avec une valeur en em

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .bottom {
        margin-bottom: 4em;
      }
    </style>
  </head>
  <body>
    <h2>Margin-bottom property example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p class="bottom">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-bottom spécifiée en "px", "em" et "%" :

Exemple de la propriété CSS margin-bottom avec des valeurs en px, em et %

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p.p1 {
        margin-bottom: 5em;
      }
      p.p2 {
        margin-bottom: 20%;
      }
      p.p3 {
        margin-bottom: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Margin-bottom property example</h2>
    <p>A paragraph with no margins specified.</p>
    <p class="p1">Bottom margin is set to 5em.</p>
    <p class="p2">Bottom margin is set to 20%.</p>
    <p class="p3">Bottom margin is set to 20px.</p>
    <p>A paragraph with no margins specified.</p>
  </body>
</html>

Essayez vous-même »

Fusion des marges

Une surprise fréquente : lorsque le margin-bottom d'un bloc rencontre le margin-top du suivant, les deux ne s'additionnent pas. Ils fusionnent en une seule marge égale à la plus grande des deux. La fusion ne s'applique qu'aux marges verticales (haut et bas) des boîtes de niveau bloc — les marges horizontales ne fusionnent jamais.

Fusion des marges

p.one {
  margin: 20px 0;
}

p.two {
  margin: 35px 0;
}

Dans le code ci-dessus, <p class="one"> a une marge verticale de 20px et <p class="two"> une marge verticale de 35px. On pourrait s'attendre à ce que l'espace entre eux soit 20 + 35 = 55px. En raison de la fusion des marges, l'espace réel est de 35px — la plus grande des deux.

Pour empêcher la fusion de deux marges, séparez-les par quelque chose : ajoutez une bordure ou un rembourrage au parent, ou placez les éléments dans des contextes de formatage différents (par exemple en définissant display: flex ou display: grid sur le conteneur, où les marges ne fusionnent jamais).

Exemple de fusion des marges :

Exemple de fusion des marges

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p.one {
        margin: 20px 0;
      }
      p.two {
        margin: 35px 0;
      }
    </style>
  </head>
  <body>
    <h2>Margin-bottom property example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p class="one">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p class="two">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 »

Valeurs

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

Propriétés associées

margin-top — l'homologue vertical qui définit l'espace au-dessus d'un élément (et fusionne avec margin-bottom).
margin — la propriété raccourcie qui définit les quatre côtés à la fois.
padding-bottom — espace à l'intérieur du bord inférieur de l'élément, dans sa bordure.
box-sizing — contrôle la façon dont la largeur et la hauteur sont mesurées ; contexte utile pour raisonner sur le modèle de boîte.

Pratique

Quelle est la fonction de la propriété 'margin-bottom' en CSS ?

Elle définit les marges supérieures d'un élément.Elle définit les marges inférieures d'un élément.Elle définit la taille de police d'un élément.Elle définit la couleur de bordure d'un élément.Elle crée un espace sous un élément pour le séparer des autres.