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
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.
Définition formelle
| 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 |
Syntaxe formelle
Error: could not find syntax for this item
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
| Specification |
|---|
| Unknown specification # margin-physical |
Compatibilité des navigateurs
BCD tables only load in the browser