padding-left
Baseline
Large disponibilité
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é CSS padding-left définit la largeur de la zone de remplissage à gauche d'un élément.
Exemple interactif
padding-left: 1.5em;
padding-left: 10%;
padding-left: 20px;
padding-left: 1ch;
padding-left: 0;
<section id="default-example">
<div class="transition-all" id="example-element">
<div class="box">
Loin dans les régions inexplorées de l'extrémité démodée du bras spiral
occidental de la Galaxie se trouve un petit soleil jaune négligé.
</div>
</div>
</section>
#example-element {
border: 10px solid #ffc129;
overflow: hidden;
text-align: left;
}
.box {
border: dashed 1px;
}
La zone de remplissage d'un élément est l'espace entre son contenu et sa bordure.
Note :
La propriété padding peut être utilisée pour définir les remplissages sur les quatre côtés d'un élément avec une seule déclaration.
Syntaxe
/* Valeurs de type <length> */
padding-left: 0.5em;
padding-left: 0;
padding-left: 2cm;
/* Valeurs de type <percentage> */
padding-left: 10%;
/* Valeurs globales */
padding-left: inherit;
padding-left: initial;
padding-left: revert;
padding-left: revert-layer;
padding-left: unset;
La propriété padding-left est définie comme une seule valeur choisie dans la liste ci-dessous. Contrairement aux marges, les valeurs négatives ne sont pas autorisées pour le remplissage.
Valeurs
<length>-
La taille du remplissage exprimée avec une valeur absolue. Cette valeur ne peut être négative.
<percentage>-
La taille du remplissage exprimée en pourcentage, relative à la taille en ligne (largeur dans une langue horizontale, définie par
writing-mode) du bloc englobant. Cette valeur ne peut être négative.
Définition formelle
| 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 et ::first-line. |
| Héritée | non |
| Pourcentages | se rapporte à la largeur du bloc contenant |
| Valeur calculée | le pourcentage tel que défini ou une longueur absolue |
| Type d'animation | une longueur |
Syntaxe formelle
padding-left =
<length-percentage [0,∞]>
<length-percentage> =
<length> |
<percentage>
Exemples
Définir le remplissage à gauche en utilisant des pixels et des pourcentages
.content {
padding-left: 5%;
}
.side-box {
padding-left: 10px;
}
Spécifications
| Spécification |
|---|
| CSS Box Model Module Level 3 # padding-physical |
Compatibilité des navigateurs
Voir aussi
- Les propriétés
padding-top,padding-rightetpadding-bottom - La propriété raccourcie
padding - Les propriétés
padding-block-start,padding-block-end,padding-inline-startetpadding-inline-end - Les propriétés raccourcies
padding-blocketpadding-inline - Le guide d'introduction au modèle de boîte CSS
- Le module du modèle de boîte CSS