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.

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

/* 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.

Syntaxe formelle

<length> | <percentage>

Exemples

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

.padd {
  padding-bottom: 5em;
  border: solid 1px;
}

Résultat

Spécifications

Spécification État Commentaires
CSS Basic Box Model
La définition de 'padding-bottom' dans cette spécification.
Version de travail Aucun changement depuis CSS Level 2 (Revision 1)
La définition de 'padding-bottom' dans cette spécification.
.
CSS Transitions
La définition de 'padding-bottom' dans cette spécification.
Version de travail padding-bottom peut désormais être animée.
CSS Level 2 (Revision 1)
La définition de 'padding-bottom' dans cette spécification.
Recommendation Aucun changement depuis CSS Level 1
La définition de 'padding-bottom' dans cette spécification.
.
CSS Level 1
La définition de 'padding-bottom' dans cette spécification.
Recommendation Définition initiale.

Valeur initiale0
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.
Héritéenon
Pourcentagesse rapporte à la largeur du bloc contenant
Médiavisuel
Valeur calculéele pourcentage tel que spécifé ou une longeur absolue
Type d'animationune longueur
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simpleChrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 4Opera Support complet 3.5Safari Support complet 1WebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui

Légende

Support complet  
Support complet

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, Sebastianz, teoli, FredB, ThePrisoner
Dernière mise à jour par : SphinxKnight,