Propriété CSS margin-top

La propriété margin-top est utilisée pour définir l'espace vertical pour la marge appliquée en haut de l'élément.

Valeurs négatives sont autorisées.

Cette propriété n'a aucun effet sur les éléments en ligne, comme <span>.

Valeur initiale	0
Appliquée à	Tous les éléments. Elle est aussi appliquée au pseudo-élément ::first-letter.
Héritée	Non.
Animable	Oui. La marge supérieure de l'élément animable.
Version	CSS2
Syntaxe DOM	object.style.marginTop = "50px";

Syntaxe

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

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .margin-top { 
      margin-top: 100px;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété margin-top</h2>
    <p>Aucune marge n'est définie.</p>
    <p class="margin-top"> Marge 100px est spécifiée en haut pour ce texte.</p>
  </body>
</html>

Essayez-vous-même!

Dans l'exemple suivant, la margin-top est spécifiée par "em":

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      p.example {
      margin-top: 5em;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété margin-top</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>

Essayez-vous-même!

Valeurs

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