padding-block
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 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
Chargement…
Voir aussi
-
Les propriétés physiques correspondantes :
-
Les propriétés influençant les propriétés logiques :