Propriété CSS padding-left
La propriété CSS padding-left définit l'espace de remplissage (padding) sur le côté gauche d'un élément.
INFO
Les valeurs négatives ne sont pas valides.
INFO
Cette propriété n'a aucun effet sur les éléments en ligne, comme <span>.
| Valeur initiale | 0 |
|---|---|
| S'applique à | Tous les éléments, sauf lorsque 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. Elle s'applique également à ::first-letter. |
| Héritée | Non. |
| Animable | Oui. L'espace de remplissage est animable. |
| Version | CSS1 |
| Syntaxe DOM | object.style.paddingLeft = "40px"; |
Syntaxe
Syntaxe de la propriété CSS padding-left
css
padding-left: length | initial | inherit;Exemple de la propriété padding-left :
Exemple de la propriété CSS padding-left avec une valeur en px
html
<!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 de la propriété padding-left définie à "3cm" :
Exemple de la propriété CSS padding-left avec une valeur en cm
html
<!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 de la propriété padding-left avec la valeur "pourcentage" :
Exemple de la propriété CSS Padding-left avec le %
html
<!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 | Jouer |
|---|---|---|
| length | Définit le remplissage gauche en px, pt, cm, etc. Sa valeur par défaut est 0px. | Jouer » |
| % | Définit le remplissage gauche en pourcentage de la largeur de l'élément contenant. | Jouer » |
| initial | Fait utiliser à la propriété sa valeur par défaut. | Jouer » |
| inherit | Hérite la propriété de son élément parent. |
Pratique
Quelle est la bonne utilisation de padding-left en CSS selon le contenu de la page ?