padding-block
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 avril 2021.
La propriété raccourcie CSS padding-block définit le remplissage logique au début et à la fin de l'axe de bloc d'un élément, ce qui correspond aux propriétés de remplissage physiques en fonction du mode d'écriture, de la direction et de l'orientation du texte de l'élément.
Exemple interactif
padding-block: 10px 20px;
writing-mode: horizontal-tb;
padding-block: 20px 40px;
writing-mode: vertical-rl;
padding-block: 5% 10%;
writing-mode: horizontal-tb;
padding-block: 2em 4em;
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;
}
Propriétés constitutives
Cette propriété est un raccourci pour les propriétés CSS suivantes :
Syntaxe
/* Valeurs de type <length> */
padding-block: 10px 20px; /* Des longueurs absolues */
padding-block: 1em 2em; /* Des longueurs relatives à la taille du texte */
padding-block: 10px; /* Une seule valeur définit le remplissage des deux côtés */
/* Valeurs de type <percentage> */
padding-block: 5% 2%; /* relative to the nearest block container's width */
/* Valeurs globales */
padding-block: inherit;
padding-block: initial;
padding-block: revert;
padding-block: revert-layer;
padding-block: unset;
La propriété padding-block peut être définie avec une ou deux valeurs. Si une seule valeur est donnée, elle est utilisée comme valeur pour padding-block-start et padding-block-end. Si deux valeurs sont données, la première est utilisée pour padding-block-start et la seconde pour padding-block-end.
Valeurs
La propriété padding-block peut prendre les mêmes valeurs que la propriété padding-top.
Description
Les valeurs de remplissage définies par padding-block peuvent être équivalentes aux propriétés padding-top et padding-bottom ou aux propriétés padding-right et padding-left, en fonction des valeurs définies pour writing-mode, direction et text-orientation.
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
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-rl;
padding-block: 20px 40px;
background-color: #c8c800;
}
Résultat
Spécifications
| Spécification |
|---|
| CSS Logical Properties and Values Module Level 1 # propdef-padding-block |
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