inset-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 avril 2021.
* Some parts of this feature may have varying levels of support.
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é inset-block-end définit la fin du décalage logique en bloc (block) d'un élément, selon le mode d'écriture, la directionnalité et l'orientation. Elle correspond à une des propriétés parmi top, right, bottom ou left selon les valeurs des propriétés writing-mode, direction et text-orientation.
Note :
Avant Firefox 63, cette propriété était implémentée avec le nom offset-block-end. Firefox 63 a mis à jour le nom de la propriété afin de s'accorder avec les modifications apportées à la spécification.
/* Valeurs de longueur */
/* Type <length> */
inset-block-end: 3px;
inset-block-end: 2.4em;
/* Valeurs relatives à la largeur */
/* du bloc englobant */
/* Type <percentage> */
inset-block-end: 10%;
/* Valeurs avec un mot-clé */
inset-block-end: auto;
/* Valeurs globales */
inset-block-end: inherit;
inset-block-end: initial;
inset-block-end: unset;
Elle est liée aux propriétés inset-block-start, inset-inline-end et inset-inline-start qui permettent de définir les autres décalages de l'élément.
Syntaxe
Valeurs
La propriété inset-block-end peut prendre les mêmes valeurs que la propriété left.
Définition formelle
| Valeur initiale | auto |
|---|---|
| Applicabilité | éléments positionnés |
| Héritée | non |
| Pourcentages | hauteur logique du bloc englobant |
| Valeur calculée | identiques aux propriétés qui décalent les boîtes : top, right, bottom, left sauf que ces directions sont logiques |
| Type d'animation | une longueur, pourcentage ou calc() ; |
Syntaxe formelle
inset-block-end =
auto |
<length-percentage>
<length-percentage> =
<length> |
<percentage>
Exemples
HTML
<div>
<p class="exemple">Texte pour l'exemple</p>
</div>
CSS
div {
background-color: yellow;
width: 120px;
height: 120px;
}
.exemple {
writing-mode: vertical-lr;
position: relative;
inset-block-end: 20px;
background-color: #c8c800;
}
Résultat
Spécifications
| Specification |
|---|
| CSS Logical Properties and Values Level 1 # propdef-inset-block-end |
| CSS Positioned Layout Module Level 3 # propdef-inset-block-end |
Compatibilité des navigateurs
Loading…
Voir aussi
-
Les propriétés physiques correspondantes :
-
Les autres propriétés qui définissent les décalages logiques
writing-modedirectiontext-orientation