margin-top

La propriété margin-top définit l'espace vertical pour la marge appliquée en haut de l'élément. Une valeur négative peut être utilisée.

Illustration du rôle de margin-top

Cette propriété n'a aucun effet sur les éléments non-remplacés en ligne (inline) tels que <tt> ou <span>.

Valeur initiale0
Applicabilitétous les éléments exceptés ceux dont les types display pour les tableaux ne sont pas table-caption, table et inline-table. S'applique aussi à ::first-letter.
Héritéenon
Pourcentagesse rapporte à la largeur du bloc contenant
Médiavisuel
Valeur calculéele pourcentage tel que spécifé ou une longeur absolue
Animableoui, comme une longueur
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

/* Valeurs de longueur */
/* Type <length>       */
margin-top: 10px;  /* Une longueur absolue */
margin-top: 1em;   /* Une longueur proportionnelle à la taille du texte */
margin-top: 5%;    /* Une marge relative à la largeur */
                   /* du bloc englobant le plus proche */

/* Valeur avec un mot-clé */
margin-top: auto;

/* Valeurs globales */
margin-top: inherit;
margin-top: initial;
margin-top: unset;

Valeurs

<length>
Cette valeur définit une largeur fixée. Pour les valeurs qui peuvent être utilisées, voir la page sur le type <length>.
<percentage>
Une valeur en pourcentage (type <percentage> qui est relative à la largeur du bloc englobant.
auto
Voir margin.

Syntaxe formelle

<length> | <percentage> | auto

Exemples

CSS

div {
  background-color: blue;
  background-clip: border-box;
  width: 50px;
  height: 2em;
}
.exemple {
  margin-top: 3em;
  background-color: gold;
  background-clip: border-box; 
}

HTML

<div></div>
<p class=exemple>
  C’est ce qui arriva en effet, et bien plus tôt 
  qu’elle ne s’y attendait. Elle n’avait pas bu 
  la moitié de la bouteille, que sa tête touchait
  au plafond et qu’elle fut forcée de se baisser
  pour ne pas se casser le cou.</p>

Résultat

Spécifications

Spécification État Commentaires
CSS Basic Box Model
La définition de 'margin-top' dans cette spécification.
Version de travail Aucun changement significatif
CSS Transitions
La définition de 'margin-top' dans cette spécification.
Version de travail margin-top peut désormais être animée.
CSS Level 2 (Revision 1)
La définition de 'margin-top' dans cette spécification.
Recommendation L'effet sur les éléments en ligne (inline) est retiré.
CSS Level 1
La définition de 'margin-top' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support simple 1.0 1.0 (1.7 ou moins) 3.0 3.5 1.0 (85)
auto 1.0 1.0 (1.7 ou moins) 6.0 (strict mode) 3.5 1.0 (85)
Fonctionnalité Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support simple 1.0 1.0 (1) 6.0 6.0 1.0

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, mrstork, Sebastianz, teoli, FredB, the prisoner
 Dernière mise à jour par : SphinxKnight,