Propriété CSS padding-bottom
Apprenez comment la propriété CSS padding-bottom ajoute de l'espace entre le contenu d'un élément et sa bordure inférieure, avec valeurs et exemples.
La propriété padding-bottom définit la quantité d'espace entre le contenu d'un élément et sa bordure inférieure. Elle contrôle l'espacement intérieur du côté bas uniquement et constitue l'une des quatre propriétés de rembourrage individuelles, aux côtés de padding-top, padding-left et padding-right.
Comprendre padding-bottom est utile lorsque vous avez besoin d'un espace vertical précis sous le texte ou d'autres contenus — sans affecter les éléments environnants comme le ferait margin-bottom.
Les valeurs négatives ne sont pas autorisées pour padding-bottom. La valeur minimale est 0.
| Valeur initiale | 0 |
|---|---|
| S'applique à | Tous les éléments sauf ceux dont display est défini sur table-row-group, table-header-group, table-footer-group, table-row, table-column-group ou table-column. S'applique également à ::first-letter. |
| Héritée | Non |
| Animable | Oui |
| Version | CSS1 |
| Syntaxe DOM | element.style.paddingBottom = "5%"; |
Syntaxe
padding-bottom: <length> | <percentage> | initial | inherit;La propriété accepte une seule valeur. Utiliser la notation abrégée padding avec quatre valeurs est équivalent mais définit les quatre côtés à la fois.
Valeurs
| Valeur | Description |
|---|---|
<length> | Un rembourrage inférieur fixe exprimé dans n'importe quelle unité de longueur CSS (px, em, rem, pt, cm, etc.). La valeur initiale est 0. |
<percentage> | Rembourrage inférieur en pourcentage de la largeur (et non de la hauteur) du bloc conteneur. Cela surprend de nombreux développeurs — voir la note ci-dessous. |
initial | Réinitialise la propriété à sa valeur par défaut (0). |
inherit | Prend la valeur calculée de l'élément parent. |
Les valeurs en pourcentage sont relatives à la largeur du bloc conteneur, et non à sa hauteur. Cela s'applique aux quatre côtés du rembourrage et est défini par la spécification CSS. Cela signifie que padding-bottom: 50% crée une hauteur égale à la moitié de la largeur du conteneur — une technique utilisée pour créer des boîtes à rapport d'aspect avant l'existence de la propriété aspect-ratio.
Comment padding-bottom affecte la mise en page
padding-bottom augmente la hauteur totale de l'élément. Le calcul exact dépend de la valeur de box-sizing en vigueur :
content-box(par défaut) :hauteur totale = height + padding-top + padding-bottom + border-top + border-bottom. La valeur depadding-bottomest ajoutée en plus de laheightspécifiée.border-box: laheightspécifiée inclut le rembourrage et la bordure. L'ajout depadding-bottomréduit la zone de contenu plutôt que d'agrandir l'élément.
Exemples
Valeur en pixels simple
L'utilisation la plus courante — un nombre fixe de pixels sous le contenu :
<!DOCTYPE html>
<html>
<head>
<title>padding-bottom with px</title>
<style>
p {
border: 2px solid #000;
color: #1c87c9;
padding-bottom: 40px;
}
</style>
</head>
<body>
<h2>padding-bottom: 40px</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Valeur de longueur en centimètres
N'importe quelle unité de longueur CSS fonctionne. Ici 2cm est utilisé, ce qui est utile pour les feuilles de style d'impression :
<!DOCTYPE html>
<html>
<head>
<title>padding-bottom with cm</title>
<style>
p {
border: 2px solid #000;
color: #1c87c9;
padding-bottom: 2cm;
}
</style>
</head>
<body>
<h2>padding-bottom: 2cm</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Valeur en pourcentage
padding-bottom: 25% ajoute un rembourrage inférieur égal à 25% de la largeur du bloc conteneur. Cet exemple l'utilise pour créer une carte visuelle simple avec un espacement proportionnel :
<!DOCTYPE html>
<html>
<head>
<title>padding-bottom with %</title>
<style>
.card {
width: 300px;
border: 2px solid #1c87c9;
background: #e8f4fd;
padding-bottom: 25%; /* = 75px (25% of 300px) */
padding-top: 16px;
padding-left: 16px;
padding-right: 16px;
}
</style>
</head>
<body>
<div class="card">
<strong>Card title</strong>
<p>The bottom padding equals 25% of the card's width.</p>
</div>
</body>
</html>Utiliser em pour un espacement évolutif
Le rembourrage basé sur em s'adapte à la taille de police de l'élément, ce qui préserve les proportions lorsque la taille de police change :
<!DOCTYPE html>
<html>
<head>
<title>padding-bottom with em</title>
<style>
.note {
font-size: 18px;
border-left: 4px solid #1c87c9;
padding-left: 12px;
padding-bottom: 1em; /* = 18px, matches font-size */
background: #f0f8ff;
}
</style>
</head>
<body>
<div class="note">
This note box uses <code>padding-bottom: 1em</code>. If you increase
the font size, the bottom padding grows proportionally.
</div>
</body>
</html>Comparaison avec box-sizing
La même height et le même padding-bottom se comportent différemment selon content-box ou border-box :
<!DOCTYPE html>
<html>
<head>
<title>padding-bottom and box-sizing</title>
<style>
.box {
width: 220px;
height: 80px;
padding-bottom: 40px;
border: 2px solid #333;
background: #d0e8ff;
margin-bottom: 12px;
color: #111;
font-size: 14px;
}
.content-box { box-sizing: content-box; } /* total height = 80+40+4 = 124px */
.border-box { box-sizing: border-box; } /* total height stays 80px */
</style>
</head>
<body>
<div class="box content-box">content-box — total height: 124px</div>
<div class="box border-box">border-box — total height: 80px</div>
</body>
</html>Propriétés associées
padding— notation abrégée qui définit les quatre côtés à la fois.padding-top— espace au-dessus du contenu.padding-left— espace à gauche du contenu.padding-right— espace à droite du contenu.margin-bottom— espace extérieur sous la bordure de l'élément (à l'extérieur, pas à l'intérieur).box-sizing— contrôle si le rembourrage est inclus dans lawidth/heightdéclarée.height— la hauteur de la zone de contenu, affectée parpadding-bottomen modecontent-box.