padding-block-end
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-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">
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 de type <length> */
padding-block-end: 10px; /* Longueur absolue */
padding-block-end: 1em; /* Longueur relative à la taille du texte */
/* Valeurs de 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é 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-block-end prend les mêmes valeurs que les propriétés de remplissage physiques telles que padding-top. Cependant, elle peut être équivalente à padding-bottom, padding-top, padding-left, ou padding-right en fonction des valeurs définies pour writing-mode, direction, et text-orientation.
Elle est liée à padding-block-start, padding-inline-start, 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-block-end =
<'padding-top'>
<padding-top> =
<length-percentage [0,∞]>
<length-percentage> =
<length> |
<percentage>
Exemples
Définir le remplissage de bloc 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-block-end: 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