Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
padding-left
Baseline Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
La propriétépadding-left d'un élément correspond à l'espace nécessaire à la gauche d'un élément. Lazone de remplissage correspond à l'espace entre le contenu et la bordure.padding-left ne peut pas recevoir de valeurs négatives.
Exemple interactif
padding-left: 1.5em;padding-left: 10%;padding-left: 20px;padding-left: 1ch;padding-left: 0;<section> <div> <div> Far out in the uncharted backwaters of the unfashionable end of the western spiral arm of the Galaxy lies a small unregarded yellow sun. </div> </div></section>#example-element { border: 10px solid #ffc129; overflow: hidden; text-align: left;}.box { border: dashed 1px;}La propriété raccourciepadding permet de paramétrer les dimensions des quatre côtés de cette boîte (y comprispadding-left donc).
Syntaxe
/* 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éstable-row-group,table-header-group,table-footer-group,table-row,table-column-group ettable-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 | unelongueur |
Syntaxe formelle
padding-left =
<length-percentage [0,∞]>
<length-percentage> =
<length>|
<percentage>
Exemples
HTML
<p> 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-left: 20%; border: solid 1px;}Résultat
Spécifications
| Specification |
|---|
| CSS Box Model Module Level 3 # padding-physical |
Compatibilité des navigateurs
Voir aussi
- Le modèle de boîtes CSS
- La propriété raccourcie
paddingqui permet de paramétrerpadding-top,padding-right,padding-bottometpadding-left.