inset-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.
* 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 définit le décalage d'un élément par rapport au début et à la fin de l'axe de bloc de l'élément. Cette propriété logique correspond à une propriété physique donnée selon le mode d'écriture de l'élément, sa direction et l'orientation de son texte. Autrement dit, cette propriété peut correspondre à top et bottom ou à right et left selon les valeurs des propriétés writing-mode, direction et text-orientation.
/* Valeurs de longueur */
/* Type <length> */
inset-block: 3px 10px;
inset-block: 2.4em 3em;
inset-block: 10px; /* La valeur est appliquée des deux côtés */
/* Les valeurs en pourcentage sont relatives à la */
/* largeur ou à la hauteur du bloc englobant */
/* Type <percentage> */
inset-block: 10% 5%;
/* Valeur avec un mot-clé */
inset-block: auto;
/* Valeurs globales */
inset-block: inherit;
inset-block: initial;
inset-block: unset;
Pour gérer les décalages sur la dimension orthogonale, on pourra utiliser la propriété logique inset-inline qui est une propriété raccourcie pour inset-inline-start, and inset-inline-end.
Syntaxe
Valeurs
La propriété inset-block peut prendre les mêmes valeurs que la propriété left.
Définition formelle
| Valeur initiale | pour chaque propriété individuelle de la propriété raccourcie :
|
|---|---|
| Applicabilité | éléments positionnés |
| Héritée | non |
| Pourcentages | hauteur logique du bloc englobant |
| Valeur calculée | pour chaque propriété individuelle de la propriété raccourcie :
|
| Type d'animation | une longueur, pourcentage ou calc() ; |
Syntaxe formelle
inset-block =
<'top'>{1,2}
<top> =
auto |
<length-percentage> |
<anchor()> |
<anchor-size()>
<length-percentage> =
<length> |
<percentage>
<anchor()> =
anchor( <anchor-name>? &&
<anchor-side> , <length-percentage>? )
<anchor-size()> =
anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )
<anchor-name> =
<dashed-ident>
<anchor-side> =
inside |
outside |
top |
left |
right |
bottom |
start |
end |
self-start |
self-end |
<percentage> |
center
<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline
Exemples
CSS
div {
background-color: yellow;
width: 120px;
height: 120px;
}
.texteExemple {
writing-mode: vertical-lr;
position: relative;
inset-block: 20px 50px;
background-color: #c8c800;
}
HTML
<div>
<p class="texteExemple">Texte d'exemple</p>
</div>
Exemples
Spécifications
| Specification |
|---|
| CSS Logical Properties and Values Level 1 # propdef-inset-block |
| CSS Positioned Layout Module Level 3 # propdef-inset-block |
Compatibilité des navigateurs
Loading…
Voir aussi
- Les propriétés physiques correspondantes :
top,right,bottom, andleft - Les propriétés influençant les propriétés logiques
writing-mode,direction,text-orientation