padding-block-end
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é CSS padding-block-end définit la fin 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.
Exemple interactif
padding-block-end: 20px;
writing-mode: horizontal-tb;
padding-block-end: 20px;
writing-mode: vertical-rl;
padding-block-end: 5em;
writing-mode: horizontal-tb;
padding-block-end: 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-end: 10px; /* Longueur absolue */
padding-block-end: 1em; /* Longueur relative à la taille du texte */
/* Valeurs de proportions */
/* Type <percentage> */
padding-block-end: 5%; /* Relatif à la largeur du bloc englobant */
/* Valeurs globales */
padding-block-end: inherit;
padding-block-end: initial;
padding-block-end: revert;
padding-block-end: revert-layer;
padding-block-end: 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, relatif à la taille du bloc englobant sur l'axe en ligne (physiquement, cela correspond à la largeur pour les sens d'écriture horizontaux (voir
writing-mode)). Cette valeur ne peut être négative.
Description
La propriété padding-block-end est définie dans la spécification comme prenant les mêmes valeurs que padding-top. Toutefois, il s'agit d'une propriété logique qui 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-start, padding-inline-start et padding-inline-end qui définissent les autres écarts de remplissage logiques d'un é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-block-end =
<'padding-top'>
<padding-top> =
<length-percentage [0,∞]>
<length-percentage> =
<length> |
<percentage>
Exemples
Définir la fin du remplissage sur l'axe de bloc pour un 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-block-end: 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 et valeurs logiques en CSS
- Les propriétés physiques correspondantes :
writing-modedirectiontext-orientation