padding-left
La propriété padding-left
d'un élément correspond à l'espace nécessaire à la gauche d'un élément. La zone de remplissage correspond à l'espace entre le contenu et la bordure. padding-left
ne peut pas recevoir de valeurs négatives.
Exemple interactif
La propriété raccourcie padding
permet de paramétrer les dimensions des quatre côtés de cette boîte (y compris padding-left
donc).
Syntaxe
css
/* Valeurs de longueur */
/* Type <length> */
padding-left: 0.5em;
padding-left: 0;
padding-left: 2cm;
/* Valeurs de proportions */
/* Type <percentage> */
padding-left: 10%;
/* Valeurs globales */
padding-left: inherit;
padding-left: initial;
padding-left: unset;
Valeurs
<length>
-
Cette valeur définit une largeur 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.
Définition formelle
Valeur initiale | 0 |
---|---|
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 et ::first-line . |
Héritée | non |
Pourcentages | se rapporte à la largeur du bloc contenant |
Valeur calculée | le pourcentage tel que spécifié ou une longueur absolue |
Type d'animation | une longueur |
Syntaxe formelle
padding-left =
<length-percentage [0,∞]>
<length-percentage> =
<length> |
<percentage>
Exemples
HTML
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
css
.padd {
padding-left: 20%;
border: solid 1px;
}
Résultat
Spécifications
Specification |
---|
CSS Box Model Module Level 3 # padding-physical |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
- Le modèle de boîtes CSS
- La propriété raccourcie
padding
qui permet de paramétrerpadding-top
,padding-right
,padding-bottom
etpadding-left
.