padding-block-end
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2021.
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
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
BCD tables only load in the browser
Voir aussi
- Les propriétés et valeurs logiques en CSS
- Les propriétés physiques correspondantes :
writing-mode
direction
text-orientation