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

css
/* 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 initiale0
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éenon
Pourcentageslargeur logique du bloc englobant
Valeur calculéecomme <length>
Type d'animationune 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

html
<div>
  <p class="exemple">Texte d'exemple</p>
</div>

CSS

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