padding-inline-start
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 janvier 2020.
La propriété CSS padding-inline-start définit le décalage avec le début de la zone de remplissage d'un élément selon le mode d'écriture, la direction et l'orientation du texte.
Exemple interactif
padding-inline-start: 20px;
writing-mode: horizontal-tb;
padding-inline-start: 20px;
writing-mode: vertical-rl;
padding-inline-start: 5em;
writing-mode: horizontal-tb;
direction: rtl;
<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;
unicode-bidi: bidi-override;
}
Syntaxe
/* Valeurs type <length> */
padding-inline-start: 10px; /* Une longueur absolue */
padding-inline-start: 1em; /* Relatif à la taille du texte */
/* Valeurs de type <percentage> */
padding-inline-start: 5%; /* Relatif à la largeur du bloc englobant */
/* Valeurs globales */
padding-inline-start: inherit;
padding-inline-start: initial;
padding-inline-start: revert;
padding-inline-start: revert-layer;
padding-inline-start: unset;
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.
Description
La propriété padding-inline-start peut prendre les mêmes valeurs que les propriétés de remplissage physiques telles que padding-top. Cependant, elle peut être équivalente à padding-left, padding-right, padding-top ou padding-bottom en fonction des valeurs définies pour writing-mode, direction et text-orientation.
Elle est liée à padding-block-start, padding-block-end et padding-inline-end, qui définissent les autres valeurs de remplissage de l'élément.
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 |
| Héritée | non |
| Pourcentages | largeur logique du bloc englobant |
| Valeur calculée | comme <length> |
| Type d'animation | une longueur |
Syntaxe formelle
padding-inline-start =
<'padding-top'>
<padding-top> =
<length-percentage [0,∞]>
<length-percentage> =
<length> |
<percentage>
Exemples
Définir le remplissage en ligne au début pour le texte vertical
HTML
<div>
<p class="texteExemple">Texte d'exemple</p>
</div>
CSS
div {
background-color: yellow;
width: 120px;
height: 120px;
}
.texteExemple {
writing-mode: vertical-lr;
padding-inline-start: 20px;
background-color: #c8c800;
}
Résultat
Spécifications
| Spécification |
|---|
| CSS Logical Properties and Values Module Level 1 # padding-properties |
Compatibilité des navigateurs
Voir aussi
- Propriétés et valeurs logiques CSS
- Les propriétés physiques correspondantes :
padding-top,padding-right,padding-bottometpadding-left - Les propriétés
writing-mode,direction,text-orientation