padding-bottom |
Espacement du bas |
| CSS |
|
Syntaxe
padding-bottom: paramètres;
|
Paramètres
| Paramètre |
Description |
| paramètres |
Ce paramètre de propriété permet d'indiquer l'espacement du bas : |
| distance |
Cet attribut permet d'indiquer que l'espacement calculé en pixels. La valeur par défaut est 0. |
| pourcentage% |
Cet attribut permet d'indiquer que l'espacement est calculé en fonction du pourcentage de la hauteur du document. |
Description
Cette propriété permet de définir l'espacement en bas entre la zone attribué au paragraphe et le paragraphe lui-même.
Remarques
- Définition et rôle : La propriété padding-bottom permet de définir l'espace intérieur entre le bord inférieur du contenu d'un élément et sa bordure
inférieure. Cet espace est ajouté à l'intérieur de la boîte de l'élément, ce qui le différencie des marges.
- Unités possibles : La valeur de padding-bottom peut être exprimée en différentes unités : absolues (comme px, cm, mm) ou relatives
(comme %, em, rem, vh, vw). Les unités relatives permettent une meilleure adaptabilité des mises en page responsives.
- Interaction avec la hauteur d'un élément : Si l'élément a une hauteur définie (via height), l'ajout de padding-bottom augmentera la taille de
l'élément, à moins que la propriété box-sizing ne soit définie sur border-box, ce qui inclut les padding dans la hauteur totale.
- Impact sur les éléments flexibles : Lorsqu'un conteneur utilise display: flex, la propriété padding-bottom s'applique normalement à chaque élément
enfant. Cependant, elle peut interagir avec les alignements définis par des propriétés comme align-items ou justify-content.
- Comportement avec les éléments en ligne (inline) : Pour les éléments en ligne, tels que span, padding-bottom n'a pas d'effet visible sur l'espacement
vertical, car ces éléments ne génèrent pas de hauteur proprement dite. Elle est généralement efficace sur les boîtes en mode bloc.
- Valeur par défaut : Par défaut, si aucune valeur spécifique n'est définie, padding-bottom est considérée comme ayant une valeur de 0. Cela signifie
qu'aucun espace supplémentaire n'est ajouté en bas de l'élément.
- Usage fréquent avec les espaces blancs : padding-bottom est souvent utilisé pour créer des espaces visuels en bas d'un conteneur sans recourir aux
marges. Cela est particulièrement utile dans des mises en page où un espacement interne est requis pour des raisons esthétiques ou fonctionnelles.
- Héritage et spécificité : padding-bottom n'est pas une propriété héritée, ce qui signifie qu'elle ne sera pas automatiquement appliquée aux éléments
enfants. Cependant, elle peut être définie pour tous les éléments d'un conteneur en utilisant un sélecteur global ou des classes partagées.
Dernière mise à jour : Dimanche, le 20 décembre 2015
