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.
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
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
/* 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.
Syntaxe formelle
<length> | <percentage>
Exemples
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
.padd { padding-left: 20%; border: solid 1px; }
Résultat
Spécifications
Spécification | État | Commentaires |
---|---|---|
CSS Basic Box Model La définition de 'padding-left' dans cette spécification. |
Version de travail | Aucun changement. |
CSS Transitions La définition de 'padding-left' dans cette spécification. |
Version de travail | padding-left peut désormais être animée. |
CSS Level 2 (Revision 1) La définition de 'padding-left' dans cette spécification. |
Recommendation | Aucun changement. |
CSS Level 1 La définition de 'padding-left' dans cette spécification. |
Recommendation | Définition initiale. |
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 . |
Héritée | non |
Pourcentages | se rapporte à la largeur du bloc contenant |
Média | visuel |
Valeur calculée | le pourcentage tel que spécifé ou une longeur absolue |
Type d'animation | une longueur |
Ordre canonique | l'ordre unique et non-ambigu défini par la grammaire formelle |
Compatibilité des navigateurs
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Ordinateur | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
padding-left | Chrome Support complet 1 | Edge Support complet 12 | Firefox Support complet 1 | IE Support complet 4 | Opera Support complet 3.5 | Safari Support complet 1 | WebView Android Support complet ≤37 | Chrome Android Support complet 18 | Firefox Android Support complet 4 | Opera Android Support complet Oui | Safari iOS Support complet 1 | Samsung Internet Android Support complet Oui |
Légende
- Support complet
- Support complet
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
.