padding-bottom
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since juillet 2015.
La propriété padding-bottom d'un élément ajuste la hauteur de la boîte de remplissage (padding) en haut de l'élément. La zone de remplissage correspond à l'espace entre le contenu et la bordure. Contrairement à margin-bottom, padding-bottom ne peut pas recevoir de valeurs négatives.
Exemple interactif
padding-bottom: 1em; padding-bottom: 10%; padding-bottom: 20px; padding-bottom: 1ch; padding-bottom: 0; <section id="default-example"> <div class="transition-all" id="example-element"> <div class="box"> Far out in the uncharted backwaters of the unfashionable end of the western spiral arm of the Galaxy lies a small unregarded yellow sun. </div> </div> </section> #example-element { border: 10px solid #ffc129; overflow: hidden; text-align: left; } .box { border: dashed 1px; } La propriété raccourcie padding permet de paramétrer les dimensions des quatre côtés de cette boîte (y compris padding-bottom donc).
Syntaxe
css
/* Valeurs de longueur */ /* Type <length> */ padding-bottom: 0.5em; padding-bottom: 0; padding-bottom: 2cm; /* Valeurs de proportions */ /* Type <percentage> */ padding-bottom: 10%; /* Valeurs globales */ padding-bottom: inherit; padding-bottom: initial; padding-bottom: unset; Valeurs
<length>-
Cette valeur définit une hauteur positive. Voir
<length>pour plus de détails. <percentage>-
Un pourcentage en rapport avec la largeur du bloc englobant. Voir
<percentage>pour plus de détails.
Définition formelle
| Valeur initiale | 0 |
|---|---|
| Applicabilité | tous les éléments exceptés table-row-group, table-header-group, table-footer-group, table-row, table-column-group et table-column. S'applique aussi à ::first-letter et ::first-line. |
| Héritée | non |
| Pourcentages | se rapporte à la largeur du bloc contenant |
| Valeur calculée | le pourcentage tel que spécifié ou une longueur absolue |
| Type d'animation | une longueur |
Syntaxe formelle
padding-bottom =
<length-percentage [0,∞]>
<length-percentage> =
<length> |
<percentage>
Exemples
HTML
html
<p class="padd"> Elle n’avait pas bu la moitié de la bouteille, que sa tête touchait au plafond et qu’elle fut forcée de se baisser pour ne pas se casser le cou. </p> CSS
css
.padd { padding-bottom: 5em; border: solid 1px; } Résultat
Spécifications
| Specification |
|---|
| CSS Box Model Module Level 3 # padding-physical |
Compatibilité des navigateurs
Loading…
Voir aussi
- Le modèle de boîtes CSS
- La propriété raccourcie
paddingqui permet de paramétrerpadding-bottom,padding-right,padding-topetpadding-left.