padding-block
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since avril 2021.
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 définit l'espace de remplissage (padding) pour le début et la fin de l'axe de bloc de l'élément. Cette propriété logique peut correspondre à différentes propriétés physiques selon le mode d'écriture de l'élément, sa direction et l'orientation du texte. Autrement dit, cette propriété peut correspondre aux propriétés padding-top et padding-bottom ou à padding-right et padding-left selon les valeurs des propriétés writing-mode, direction et text-orientation.
/* Valeurs de longueur */
/* Type <length> */
padding-block: 10px 20px; /* Des longueurs absolues */
padding-block: 1em 2em; /* Des longueurs relatives à la taille du texte */
padding-block: 5% 2%; /* Des longueurs relatives à la taille du bloc englobant */
padding-block: 10px; /* Une seule valeur définit le remplissage des deux côtés */
/* Valeurs avec un mot-clé */
padding-block: auto;
/* Valeurs globales */
padding-block: inherit;
padding-block: initial;
padding-block: unset;
Ces valeurs peuvent être définies individuellement grâce aux propriétés détaillées padding-block-start et padding-block-end. Pour définir le remplissage sur l'axe en ligne, on pourra utiliser la propriété logique raccourcie padding-inline qui définit padding-inline-start et padding-inline-end.
Syntaxe
Valeur
La propriété padding-block peut prendre les mêmes valeurs que la propriété padding-left.
Définition formelle
| Valeur initiale | pour chaque propriété individuelle de la propriété raccourcie : |
|---|---|
| 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 | pour chaque propriété individuelle de la propriété raccourcie :
|
| Type d'animation | une longueur |
Syntaxe formelle
padding-block =
<'padding-top'>{1,2}
<padding-top> =
<length-percentage [0,∞]>
<length-percentage> =
<length> |
<percentage>
Exemples
CSS
div {
background-color: yellow;
width: 120px;
height: 120px;
}
.texteExemple {
writing-mode: vertical-rl;
padding-block: 20px 40px;
background-color: #c8c800;
}
HTML
<div>
<p class="texteExemple">Texte d'exemple</p>
</div>
Résultat
Spécifications
| Specification |
|---|
| CSS Logical Properties and Values Level 1 # propdef-padding-block |
Compatibilité des navigateurs
Loading…
Voir aussi
-
Les propriétés physiques correspondantes :
-
Les propriétés influençant les propriétés logiques :