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.
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
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 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. |
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 . |
Héritée | non |
Pourcentages | se rapporte à la largeur du bloc contenant |
Média | visuel |
Valeur calculée | le pourcentage tel que spécifé ou une longeur absolue |
Type d'animation | une longueur |
Ordre canonique | l'ordre unique et non-ambigu défini par la grammaire formelle |
Compatibilité des navigateurs
Fonctionnalité | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Support simple | 1 | 12 | 1 | 3 | 3.5 | 1 |
auto | 1 | ? | 1 | 61 | 3.5 | 1 |
Fonctionnalité | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
---|---|---|---|---|---|---|---|
Support simple | 1 | ? | Oui | 4 | 6 | 1 | ? |
auto | ? | ? | ? | 4 | ? | ? | ? |
1. The auto
value is not supported in quirks mode.