Propriété CSS margin-bottom

❮ Précédent Suivant ❯

La propriété margin-bottom est utilisée pour définir l'espace de la marge en bas de l'élément. Valeurs négatives sont valides.

Si les éléments en ligne (inline) qui ne sont pas remplacés (en tant que <tt> ou <span>) sont utilisés, la propriété CSS margin-bottom n'aura aucun effet.

Valeurs initiales	0
Appliquée à	Tous les éléments. Elle est appliquée à élément pseudo ::first-letter
Héritée	Non.
Animable	Oui. La marge basse de l'élément est animable.
Version	CSS2
Syntaxe DOM	object.style.marginBottom = "70px";

Syntaxe

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

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .bottom { margin-bottom: 100px;}
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété margin-bottom</h2>
    <p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.</p>
    <p class="bottom">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>

Essayez-vous-même!

Un autre exemple, dans lequel la marge inférieure de l'élément est définie à "4em":

Exemple

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

Essayez-vous-même!

Un autre exemple, dans lequel la marge basse de l'élément est spécifiée par "px", "em" et "%" pour montrer la différence:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      p.p1 {
      margin-bottom: 5em;
      }
      p.p2 {
      margin-bottom: 20%;
      }
      p.p3 {
      margin-bottom: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété margin-bottom</h2>
    <p>Un paragraphe avec aucune marge spécifiée.</p>
    <p class="p1">Marge inférieure définie à 5em.</p>
    <p class="p2">Marge inférieure définie à 20%.</p>
    <p class="p3">Marge inférieure définie à 20px.</p>
    <p>Un paragraphe avec aucune marge spécifiée.</p>
  </body>
</html>

Essayez-vous-même!

Valeurs

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