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>

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>

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.

Support de Navigateurs

1.0+ 1.0+ 1.0+ 3.5+


Trouvez-vous cela utile?

Articles Associées