Propriété CSS padding-bottom
This CSS property is used to specify the padding space on the bottom of an element. See more about property values in use.
La propriété padding-bottom définit l'espace de remplissage (padding) en bas d'un élément. Elle définit l'espace entre le contenu de l'élément et sa bordure inférieure.
Le remplissage de l'élément contribue au calcul de la hauteur de l'élément. Plus précisément, padding-bottom augmente la hauteur totale en ajoutant de l'espace sous le contenu. Si vous utilisez la valeur « border-box » de la propriété box-sizing, le calcul de la hauteur totale change de sorte que le remplissage est inclus dans la hauteur spécifiée.
info
Les valeurs négatives ne sont pas valides.
info
Cette propriété n'a aucun effet sur les éléments en ligne, comme <span>.
| Valeur initiale | 0 |
|---|---|
| S'applique à | Tous les éléments. Une exception est faite lorsque la propriété display est définie sur table-row-group, table-header-group, table-footer-group, table-row, table-column-group et table-column. Elle s'applique également à ::first-letter. |
| Héritée | Non. |
| Animable | Oui. L'espace de remplissage est animable. |
| Version | CSS1 |
| Syntaxe DOM | element.style.paddingBottom = "5%"; |
Syntaxe
Syntaxe de la propriété CSS padding-bottom
padding-bottom: length | % | initial | inherit;Exemple de la propriété padding-bottom :
Exemple de la propriété CSS padding-bottom avec une valeur en px
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 2px solid #000;
color: #1c87c9;
padding-bottom: 40px;
}
</style>
</head>
<body>
<h2>Padding-bottom property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Résultat
Exemple de la propriété padding-bottom avec la valeur « length » :
Exemple de la propriété CSS padding-bottom avec une valeur en cm
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 2px solid #000;
color: #1c87c9;
padding-bottom: 2cm;
}
</style>
</head>
<body>
<h2>Padding-bottom property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Valeurs
| Valeur | Description | Tester » |
|---|---|---|
| length | Définit le remplissage inférieur en px, pt, cm, etc. Sa valeur initiale est 0. | Tester » |
| % | Définit le remplissage inférieur en pourcentage de la largeur du bloc contenant. | Tester » |
| initial | Fait utiliser à la propriété sa valeur par défaut. | Tester » |
| inherit | Hérite la propriété de son élément parent. |
Practice
Quel est l'objectif de la propriété 'padding-bottom' en CSS ?