padding-inline-start
Baseline
Widely available
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é 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">
Far out in the uncharted backwaters of the unfashionable end of the
western spiral arm of the Galaxy lies a small unregarded yellow sun.
</div>
</div>
</section>
#example-element {
border: 10px solid #ffc129;
overflow: hidden;
text-align: left;
}
.box {
border: dashed 1px;
unicode-bidi: bidi-override;
}
Syntaxe
/* Valeurs de longueur */
/* Type <length> */
padding-inline-start: 10px; /* Une longueur absolue */
padding-inline-start: 1em; /* Relatif à la taille du texte */
/* Valeurs de proportions */
/* 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: unset;
Valeurs
<length>-
La taille de la zone de remplissage exprimée de façon absolue. Les valeurs négatives sont interdites.
<percentage>-
La taille de la zone de remplissage exprimée de façon relative à la taille en ligne (inline en anglais) du bloc englobant. Les valeurs négatives sont interdites.
Description
Selon sa définition dans la spécification, la propriété padding-inline-start peut prendre les mêmes valeurs que la propriété padding-top. Toutefois, elle peut en réalité correspondre à la propriété physique padding-top, padding-right ou padding-left selon les valeurs définies pour writing-mode, direction et text-orientation.
Les autres parties du remplissage sont définies grâce aux propriétés padding-block-start, padding-block-end et padding-inline-end.
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éfinition de padding-inline-start avec du texte vertical
HTML
<div>
<p class="exemple">Texte d'exemple</p>
</div>
CSS
div {
background-color: yellow;
width: 120px;
height: 120px;
}
.exemple {
writing-mode: vertical-lr;
padding-inline-start: 20px;
background-color: #c8c800;
}
Résultat
Spécifications
| Specification |
|---|
| CSS Logical Properties and Values Module Level 1 # padding-properties |
Compatibilité des navigateurs
Voir aussi
-
Les propriétés physiques correspondantes :