Propriété CSS margin-bottom
La propriété margin-bottom permet de définir l'espace de marge en bas d'un élément.
INFO
Les valeurs négatives sont valides.
INFO
Si des éléments en ligne non remplacés (tels que <tt> ou <span>) sont utilisés, la propriété CSS margin-bottom n'aura aucun effet.
| Valeur initiale | 0 |
|---|---|
| S'applique à | Tous les éléments. Elle s'applique également à ::first-letter. |
| Héritée | Non. |
| Animable | Oui. La marge inférieure de l'élément est animable. |
| Version | CSS2 |
| Syntaxe DOM | object.style.marginBottom = "70px"; |
Syntaxe
Syntaxe de la propriété CSS margin-bottom
margin-bottom: length | auto | initial | inherit;Exemple de la propriété margin-bottom :
Exemple de la propriété CSS margin-bottom avec une valeur en px
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.bottom {
margin-bottom: 100px;
}
</style>
</head>
<body>
<h2>Margin-bottom property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="bottom">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>Résultat
Exemple de la propriété margin-bottom définie sur "4em" :
Exemple de la propriété CSS margin-bottom avec une valeur en em
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.bottom {
margin-bottom: 4em;
}
</style>
</head>
<body>
<h2>Margin-bottom property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="bottom">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-bottom spécifiée en "px", "em" et "%" :
Exemple de la propriété CSS margin-bottom avec des valeurs en px, em et %
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.p1 {
margin-bottom: 5em;
}
p.p2 {
margin-bottom: 20%;
}
p.p3 {
margin-bottom: 20px;
}
</style>
</head>
<body>
<h2>Margin-bottom property example</h2>
<p>A paragraph with no margins specified.</p>
<p class="p1">Bottom margin is set to 5em.</p>
<p class="p2">Bottom margin is set to 20%.</p>
<p class="p3">Bottom margin is set to 20px.</p>
<p>A paragraph with no margins specified.</p>
</body>
</html>Regroupement des marges
Dans certains cas, les marges supérieure et inférieure peuvent se regrouper en une seule marge égale à la plus grande des deux. Cela ne peut se produire qu'avec les marges verticales (supérieure et inférieure).
Regroupement des marges
p.one {
margin: 20px 0;
}
p.two {
margin: 35px 0;
}Dans l'exemple de code ci-dessus, l'élément <p class="one"> possède une marge verticale de 20px. L'élément <p class="two"> a une marge verticale de 35px. On pourrait penser que la marge verticale entre ces deux éléments doit être de 55px. Cependant, en raison du regroupement des marges, la marge réelle sera de 35px.
Exemple de regroupement des marges :
Exemple de regroupement des marges
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.one {
margin: 20px 0;
}
p.two {
margin: 35px 0;
}
</style>
</head>
<body>
<h2>Margin-bottom property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="one">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="two">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>Valeurs
| Valeur | Description | Tester |
|---|---|---|
| auto | Définit la marge inférieure. C'est la valeur par défaut de cette propriété. | Tester » |
| length | Définit une marge inférieure en px, pt, cm, etc. La valeur par défaut est 0. | Tester » |
| % | Définit la marge inférieure en % de l'élément conteneur. | 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-bottom' en CSS ?