Propriété CSS padding-bottom

La propriété padding-bottom définit l'espace de remplissage (padding) en bas d'un élément. Elle définit l'espace entre le contenu de l'élément et sa bordure inférieure.

Le remplissage de l'élément contribue au calcul de la hauteur de l'élément. Plus précisément, padding-bottom augmente la hauteur totale en ajoutant de l'espace sous le contenu. Si vous utilisez la valeur « border-box » de la propriété box-sizing, le calcul de la hauteur totale change de sorte que le remplissage est inclus dans la hauteur spécifiée.

INFO

Les valeurs négatives ne sont pas valides.

INFO

Cette propriété n'a aucun effet sur les éléments en ligne, comme <span>.

Valeur initiale	0
S'applique à	Tous les éléments. Une exception est faite lorsque la propriété display est définie sur table-row-group, table-header-group, table-footer-group, table-row, table-column-group et table-column. Elle s'applique également à ::first-letter.
Héritée	Non.
Animable	Oui. L'espace de remplissage est animable.
Version	CSS1
Syntaxe DOM	element.style.paddingBottom = "5%";

Syntaxe

Syntaxe de la propriété CSS padding-bottom

css

padding-bottom: length | % | initial | inherit;

Exemple de la propriété padding-bottom :

Exemple de la propriété CSS padding-bottom avec une valeur en px

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        border: 2px solid #000;
        color: #1c87c9;
        padding-bottom: 40px;
      }
    </style>
  </head>
  <body>
    <h2>Padding-bottom property example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </body>
</html>

Try it Yourself »

Résultat

CSS padding-bottom Property

Exemple de la propriété padding-bottom avec la valeur « length » :

Exemple de la propriété CSS padding-bottom avec une valeur en cm

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        border: 2px solid #000;
        color: #1c87c9;
        padding-bottom: 2cm;
      }
    </style>
  </head>
  <body>
    <h2>Padding-bottom property example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </body>
</html>

Try it Yourself »

Valeurs

Valeur	Description	Tester »
length	Définit le remplissage inférieur en px, pt, cm, etc. Sa valeur initiale est 0.	Tester »
%	Définit le remplissage inférieur en pourcentage de la largeur du bloc contenant.	Tester »
initial	Fait utiliser à la propriété sa valeur par défaut.	Tester »
inherit	Hérite la propriété de son élément parent.

Practice

Quel est l'objectif de la propriété 'padding-bottom' en CSS ?

Elle est utilisée pour définir l'espace qui sépare le contenu d'un élément de sa bordure supérieure.Elle est utilisée pour définir l'espace qui sépare le contenu d'un élément de sa bordure inférieure.Elle est utilisée pour modifier la taille de la police d'un élément.Elle est utilisée pour définir l'espace qui sépare le contenu d'un élément de sa bordure gauche.Elle est utilisée pour définir l'espace qui sépare le contenu d'un élément de sa bordure droite.

Propriété CSS padding-bottom ​

Syntaxe ​

Exemple de la propriété padding-bottom : ​

Résultat ​

Exemple de la propriété padding-bottom avec la valeur « length » : ​

Valeurs ​