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.
| Fonctionnalité | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Support simple | 1 | 12 | 1 | 4 | 3.5 | 1 |
| Fonctionnalité | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
|---|---|---|---|---|---|---|---|
| Support simple | Oui | Oui | Oui | 4 | Oui | Oui | Oui |
Voir aussi
- Le modèle de boîtes CSS
- La propriété raccourcie
paddingqui permet de paramétrerpadding-top,padding-right,padding-bottometpadding-left.