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.

Exemple interactif

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

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;

Le mot-clé auto ou une valeur de longueur (<length>) ou de pourcentage (<percentage>).

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 Box Model La définition de 'margin-top' dans cette spécification.	Candidat au statut de recommandation	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.

Valeur initiale	`0`
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` et `::first-line`.
Héritée	non
Pourcentages	se rapporte à la largeur du bloc contenant
Valeur calculée	le pourcentage tel que spécifié ou une longueur absolue
Type d'animation	une longueur

Compatibilité des navigateurs

BCD tables only load in the browser