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 July 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

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

BCD tables only load in the browser

Voir aussi

Le modèle de boîtes CSS
La propriété raccourcie padding qui permet de paramétrer padding-bottom, padding-right, padding-top et padding-left.