Padding¶
La propriété padding définit l'espace entre le contenu et ses extrémités. Par défaut, cette propriété à une valeur de 0 permettant au contenu de s'afficher a même les extrémités de l'élément, mais elle accepte l'ensemble des unités de mesure CSS.
Lorsqu'une seule valeur est fournie, celle-ci est appliquée aux 4 côtés de l'élément.
Par exemple:
Warning
La propriété padding n’accepte pas les valeurs négatives.
Sous-propriétés¶
Pour plus de contrôle, il est possible d'attribuer une valeur différente à chaque côté en utilisant les sous-propriétés suivantes:
padding-toppadding-rightpadding-bottompadding-left
Par exemple:
Syntaxe courte¶
Il est aussi possible d'attribuer les 4 côtés avec la syntaxe courte en les spécifiant un après l'autre en commençant par le haut et en tournant dans le sens des aiguilles d'une montre ⌚️ (top, right, bottom et left).
Par exemple:
Ratio à partir de %¶
Lorsqu'une valeur de padding est définie en pourcentage (%), que ce soit à l'horizontale (left/right) ↔️ ou vertical (top/bottom) ↕️, celle-ci se base toujours sur la largeur de l'élément.
Autrement dit, si un élément mesure 100x20px et que padding-bottom: 100% lui est ajouté, sa hauteur finale sera de 120px (20x de haut + 100px de padding-bottom).
Cette particularité est souvent exploitée afin de créer des éléments ayant un ratio spécifique. Par exemple, afin d'obtenir un format 16/9 il suffit de ramener la valeur de hauteur de cette fraction en pourcentage, soit9 ÷ 16 x 100% = 56.25%.
.element {
width: 100%;
height: 0;
padding-bottom: 56.25%; // 16/9
}