padding-bottom

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 AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
padding-bottomChrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 4Opera Support complet 3.5Safari Support complet 1WebView Android Support complet ≤37Chrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet 1Samsung Internet Android Support complet Oui

Légende

Support complet  
Support complet

Voir aussi