padding-block-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.
Expérimental: Il s'agit d'une technologie expérimentale.
Vérifiez attentivement le tableau de compatibilité des navigateurs avant de l'utiliser en production.
La propriété padding-block-start définit le début logique de la zone de remplissage d'un élément de bloc. Cette propriété logique est traduite en une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à la propriété padding-top, padding-right, padding-bottom ou padding-left selon les valeurs qui sont utilisées pour writing-mode, direction et text-orientation.
Elle est à rapprocher des propriétés padding-block-end, padding-inline-start et padding-inline-end qui définissent les autres écarts de remplissage logiques d'un élément.
Exemple interactif
padding-block-start: 20px;
writing-mode: horizontal-tb;
padding-block-start: 20px;
writing-mode: vertical-rl;
padding-block-start: 5em;
writing-mode: horizontal-tb;
padding-block-start: 5em;
writing-mode: vertical-lr;
<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-block-start: 10px;
padding-block-start: 1em;
/* Valeurs de proportions */
/* Type <percentage> */
padding-block-start: 5%; /* Relatif à la largeur du bloc englobant */
/* Valeurs globales */
padding-block-start: inherit;
padding-block-start: initial;
padding-block-start: unset;
Valeurs
La propriété padding-block-start peut prendre les mêmes valeurs que la propriété padding-left.
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-block-start =
<'padding-top'>
<padding-top> =
<length-percentage [0,∞]>
<length-percentage> =
<length> |
<percentage>
Exemples
HTML
<div>
<p class="exemple">Texte d'exemple et Lorem et IP sum</p>
</div>
CSS
div {
background-color: yellow;
width: 120px;
height: 120px;
}
.exemple {
writing-mode: vertical-lr;
padding-block-start: 20px;
background-color: #c8c800;
}
Résultat
Spécifications
| Specification |
|---|
| CSS Logical Properties and Values Level 1 # padding-properties |
Compatibilité des navigateurs
Chargement…
Voir aussi
-
Les propriétés physiques correspondantes :
text-orientation