Propriété CSS margin-bottom

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>

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>

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>

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.

Support de Navigateurs

1.0+ 1.0+ 1.0+ 3.5+


Trouvez-vous cela utile?

Articles Associées