Propriété CSS padding-left
Comment utiliser la propriété CSS padding-left pour définir l'espace de rembourrage à gauche d'un élément. Valeurs et exemples.
La propriété CSS padding-left définit la largeur de la zone de rembourrage sur le côté gauche d'un élément. Le rembourrage est l'espace entre le contenu d'un élément et sa bordure — augmenter padding-left pousse le contenu vers la droite, loin du bord gauche, sans affecter les éléments voisins.
Cette page couvre la syntaxe de padding-left, les unités et valeurs de mot-clé acceptées, le calcul des pourcentages, son interaction avec la propriété abrégée padding et le modèle de boîte, ainsi que des exemples exécutables.
Quand utiliser padding-left
Utilisez padding-left (plutôt que la propriété abrégée padding) lorsque vous n'avez besoin d'ajuster qu'un seul côté et souhaitez garder la règle explicite et facile à lire — par exemple pour indenter le texte d'une liste, décaler une étiquette par rapport à une icône ou créer de l'espace à gauche d'une carte.
Si vous définissez les quatre côtés à la fois, préférez la propriété abrégée padding. Les propriétés individuelles — padding-left, padding-right, padding-top et padding-bottom — sont pratiques pour remplacer une seule valeur après qu'une propriété abrégée ait défini les autres.
Le rembourrage n'est pas une marge. Le rembourrage se situe à l'intérieur de la bordure de l'élément et partage son arrière-plan ; margin-left ajoute de l'espace à l'extérieur de la bordure et est toujours transparent. Pour séparer un élément de son voisin, utilisez margin ; pour repousser le contenu vers l'intérieur, utilisez padding.
Les valeurs négatives ne sont pas autorisées. Contrairement aux marges, le rembourrage ne peut jamais être négatif.
Sur les éléments inline comme <span>, le rembourrage horizontal est appliqué (et est visible), mais il ne repousse pas les boîtes de ligne environnantes — donc verticalement il semble n'avoir aucun effet sur la mise en page. Pour un contrôle total, définissez l'élément avec display: inline-block ou display: block.
Comment padding-left affecte le modèle de boîte
Par défaut, le navigateur utilise le modèle de boîte CSS standard, où la largeur rendue d'un élément est sa width plus ses rembourrages gauche et droit plus ses bordures. Ainsi, ajouter padding-left: 100px rend l'élément 100px plus large au total.
Si vous souhaitez que le rembourrage soit inclus dans la width déclarée plutôt que d'y être ajouté, définissez box-sizing: border-box. C'est la cause la plus fréquente du problème « ma mise en page a débordé quand j'ai ajouté du rembourrage » — border-box le résout.
| Valeur initiale | 0 |
|---|---|
| S'applique à | Tous les éléments, à l'exception des cas où la propriété display est définie sur table-row-group, table-header-group, table-footer-group, table-row, table-column-group et table-column. S'applique également à ::first-letter. |
| Hérité | Non. |
| Animable | Oui. L'espace de rembourrage est animable. |
| Version | CSS1 |
| Syntaxe DOM | object.style.paddingLeft = "40px"; |
Syntaxe
Syntaxe de la propriété CSS padding-left
padding-left: length | percentage | initial | inherit;La valeur est le plus souvent une longueur fixe (px, em, rem, cm, …) ou un pourcentage. Les pourcentages sont résolus par rapport à la largeur du bloc conteneur — y compris pour le rembourrage gauche/droit et haut/bas — donc un rembourrage en pourcentage réactif s'adapte à la largeur du conteneur.
Exemple avec une valeur en px
Une valeur fixe en pixels est le choix le plus prévisible. Ici padding-left: 100px pousse le texte du paragraphe de 100px depuis la bordure gauche :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 2px solid #000;
color: #1c87c9;
padding-left: 100px;
}
</style>
</head>
<body>
<h2>Padding-left property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Résultat
Exemple avec une valeur en cm
Toute unité de longueur absolue fonctionne de la même manière. Ici le rembourrage est exprimé en centimètres :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 2px solid #000;
color: #1c87c9;
padding-left: 3cm;
}
</style>
</head>
<body>
<h2>Padding-left property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Exemple avec une valeur en pourcentage
Un pourcentage est relatif à la largeur du bloc conteneur, donc l'indentation grandit et rétrécit avec la mise en page. Notez que la propriété abrégée padding: 20px est déclarée en premier, puis padding-left: 15% remplace uniquement le côté gauche :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 3px solid #cccccc;
color: deepskyblue;
padding: 20px;
padding-left: 15%;
}
</style>
</head>
<body>
<h2>Padding-left property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Valeurs
| Valeur | Description | Essayer |
|---|---|---|
| length | Définit le rembourrage gauche comme une longueur fixe (px, pt, em, rem, cm, etc.). La valeur par défaut est 0. Les longueurs négatives sont invalides. | Essayer » |
| % | Définit le rembourrage gauche comme un pourcentage de la largeur du bloc conteneur. | Essayer » |
| initial | Réinitialise la propriété à sa valeur par défaut (0). | Essayer » |
| inherit | Prend la valeur calculée de padding-left de l'élément parent. (Le rembourrage n'est pas hérité par défaut.) |
Propriétés associées
padding— la propriété abrégée qui définit les quatre côtés à la fois.padding-right,padding-top,padding-bottom— les autres propriétés individuelles.margin-left— ajoute de l'espace à l'extérieur de la bordure plutôt qu'à l'intérieur.box-sizing— contrôle si le rembourrage est ajouté à ou inclus dans lawidthde l'élément.display— affecte le comportement du rembourrage horizontal sur les éléments inline et block.