Propriété CSS margin-top
La propriété CSS margin-top définit la marge supérieure d'un élément. Découvrez les valeurs et des exemples.
La propriété margin-top définit la taille de la marge supérieure d'un élément — l'espace transparent au-dessus de sa boîte, entre le bord supérieur de l'élément et l'élément situé au-dessus. C'est le pendant vertical de margin-bottom et l'un des quatre côtés contrôlés ensemble par le raccourci margin.
Cette page explique les valeurs acceptées par margin-top, les deux comportements qui surprennent le plus — la fusion des marges verticales et les pourcentages calculés par rapport à la largeur — et propose des exemples interactifs pour chaque valeur.
Cette propriété n'a aucun effet sur les éléments en ligne non remplacés tels que <span>. Pour ajouter de l'espace vertical autour d'eux, rendez-les d'abord inline-block ou block.
Fusion des marges verticales
Lorsque la marge inférieure d'un bloc touche la marge supérieure du suivant, les deux fusionnent en une seule marge égale à la plus grande des deux — et non à leur somme. Ainsi, un paragraphe avec margin-bottom: 30px suivi d'un autre avec margin-top: 20px aboutit à 30px d'espace entre eux, et non 50px.
La fusion ne se produit qu'entre les marges verticales (haut et bas). Les marges gauche et droite ne fusionnent jamais. Elle est également empêchée par tout élément interposé entre les deux marges — une bordure, un padding, un élément en ligne ou un contexte de formatage de bloc tel qu'un conteneur flex/grid ou une valeur overflow autre que visible.
Les valeurs négatives sont autorisées. Un margin-top négatif tire l'élément vers le haut, en le faisant chevaucher ou en réduisant l'écart avec l'élément au-dessus.
| Valeur initiale | 0 |
|---|---|
| S'applique à | Tous les éléments. S'applique également à ::first-letter. |
| Hérité | Non. |
| Animable | Oui. La marge supérieure de l'élément est animable. |
| Version | CSS2 |
| Syntaxe DOM | object.style.marginTop = "50px"; |
Syntaxe
Syntaxe de la propriété CSS margin-top
margin-top: length | auto | initial | inherit;Exemple de la propriété margin-top :
Exemple de la propriété CSS margin-top avec une valeur en px
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.margin-top {
margin-top: 100px;
}
</style>
</head>
<body>
<h2>Margin-top property example</h2>
<p>No specified margin.</p>
<p class="margin-top"> 100px margin is specified top for this text.</p>
</body>
</html>Résultat
Exemple de la propriété margin-top spécifiée en « em » :
Exemple de la propriété CSS margin-top avec une valeur en em
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.example {
margin-top: 5em;
}
</style>
</head>
<body>
<h2>Margin-top property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="example">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Exemple de la propriété margin-top spécifiée en « % »
Un margin-top en pourcentage est calculé par rapport à la largeur du bloc conteneur — et non à sa hauteur. C'est facile à manquer : margin-top: 10% dans un parent large de 600px donne 60px, et cette valeur change lorsque le parent s'élargit, même si la marge est verticale.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.margin-top {
margin-top: 10%;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>Margin-top property example</h2>
<p>No specified margin.</p>
<p class="margin-top"> 10% margin is specified top for this text.</p>
</body>
</html>Exemple de la propriété margin-top avec la valeur « initial » :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.margin-top {
margin-top: initial;
background-color: lightgreen;
}
</style>
</head>
<body>
<h2>Margin-top property example</h2>
<p>No specified margin.</p>
<p class="margin-top"> Margin top is specified for this text.</p>
</body>
</html>Exemple de la propriété margin-top avec la valeur « inherit » :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
margin-top: 50px;
}
.margin-top {
margin-top: inherit;
background-color: lime;
}
</style>
</head>
<body>
<h2>Margin-top property example</h2>
<div>
Here is some text.
<p class="margin-top"> Margin top is specified for this text.</p>
</div>
</body>
</html>Valeurs
| Valeur | Description | Essayer |
|---|---|---|
| length | Une marge supérieure fixe en px, em, pt, cm, etc. Peut être négative. La valeur par défaut est 0. | Essayer » |
| % | Une marge supérieure définie en pourcentage de la largeur du bloc conteneur. | Essayer » |
| auto | Le navigateur calcule la valeur. Pour une marge supérieure, elle est résolue à 0 (contrairement à auto horizontal, qui peut centrer un élément). | Essayer » |
| initial | Réinitialise la propriété à sa valeur par défaut (0). | Essayer » |
| inherit | Hérite de la valeur calculée de l'élément parent. |
auto n'est utile que pour centrer avec margin-left/margin-right. Sur une marge supérieure, il n'a aucun effet de centrage et se comporte comme 0.
Quand utiliser margin-top plutôt que padding-top
Utilisez margin-top pour créer de l'espace à l'extérieur d'un élément, en l'éloignant de ses voisins — en gardant à l'esprit que ces marges peuvent fusionner avec l'élément au-dessus. Utilisez padding-top lorsque vous avez besoin d'espace à l'intérieur de la boîte, entre la bordure et le contenu ; le padding ne fusionne jamais et est inclus dans tout background visible.
Propriétés associées
margin— le raccourci qui définit les quatre marges en une seule déclaration.margin-bottom,margin-right,margin-left— les trois autres côtés.box-sizing— contrôle la relation entre largeur/hauteur, padding et bordure dans le modèle de boîte.