Propriété margin-top de CSS
La propriété margin-top est utilisée pour définir la marge supérieure d'un élément.
INFO
Cette propriété n'affecte pas les éléments en ligne, comme <span>.
Les marges supérieure et inférieure d'un élément peuvent se combiner en une seule, égale à la plus grande des deux. Cependant, cela ne se produit qu'avec les marges verticales.
INFO
Les valeurs négatives sont autorisées.
| Valeur initiale | 0 |
|---|---|
| S'applique à | Tous les éléments. Elle 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 "%" :
Exemple de la propriété margin-top spécifiée en "%" :
<!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" :
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" :
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 | Tester |
|---|---|---|
| auto | Définit la marge supérieure. C'est la valeur par défaut de cette propriété. | Tester » |
| length | Définit une marge supérieure en px, pt, cm, etc. La valeur par défaut est 0. | Tester » |
| % | Définit la marge supérieure en % de l'élément parent. | Tester » |
| initial | Fait utiliser à la propriété sa valeur par défaut. | Tester » |
| inherit | Hérite la propriété de son élément parent. |
Pratique
Quelle est la fonction de la propriété 'margin-top' en CSS ?