inset-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.
* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.
La propriété CSS inset-block définit les décalages logiques de début et de fin de bloc d'un élément, qui correspondent à des décalages physiques selon le mode d'écriture, la direction et l'orientation du texte de l'élément. Elle correspond aux propriétés top et bottom, ou right et left selon les valeurs définies pour writing-mode, direction et text-orientation.
Cette propriété d'encart n'a aucun effet sur les éléments non positionnés.
Exemple interactif
inset-block: 10px 20px;
writing-mode: horizontal-tb;
inset-block: 20px 40px;
writing-mode: vertical-rl;
inset-block: 5% 20%;
writing-mode: horizontal-tb;
inset-block: 1rem auto;
writing-mode: vertical-lr;
<section id="default-example">
<div class="example-container">
<div id="example-element">Je suis positionné absolument.</div>
<p>
Il y a autant de boue dans les rues que si les eaux venaient à peine de se
retirer de la surface de la terre, et il ne serait pas étonnant de croiser
un Mégalosaure, long d'une douzaine de mètres, se dandinant comme un
lézard éléphantesque dans Holborn Hill.
</p>
</div>
</section>
.example-container {
border: 0.75em solid #ad1457;
padding: 0.75em;
text-align: left;
position: relative;
width: 100%;
min-height: 200px;
}
#example-element {
background-color: #07136c;
border: 6px solid #ffa000;
color: white;
position: absolute;
inset: 0;
}
Propriétés constitutives
Cette propriété est un raccourci pour les propriétés CSS suivantes :
Syntaxe
/* Valeurs de type <length> */
inset-block: 3px 10px;
inset-block: 2.4em 3em;
inset-block: 10px; /* La valeur est appliquée des deux côtés */
inset-block: auto anchor(start);
inset-block: 10em anchor-size(--my-anchor height, 10%);
/* Les valeurs en pourcentage sont relatives à la largeur ou à la hauteur du bloc englobant */
/* Valeurs de type <percentage> */
inset-block: 10% 5%;
/* Valeur avec un mot-clé */
inset-block: auto;
/* Valeurs globales */
inset-block: inherit;
inset-block: initial;
inset-block: revert;
inset-block: revert-layer;
inset-block: unset;
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
Définir des décalages de début et de fin de bloc
HTML
<div>
<p class="exempleTexte">Texte d'exemple</p>
</div>
CSS
div {
background-color: yellow;
width: 120px;
height: 120px;
}
.exempleTexte {
writing-mode: vertical-lr;
position: relative;
inset-block: 20px 50px;
background-color: #c8c800;
}
Résultat
Spécifications
| Specification |
|---|
| CSS Logical Properties and Values Module Level 1 # propdef-inset-block |
| CSS Positioned Layout Module Level 3 # propdef-inset-block |
Compatibilité des navigateurs
Voir aussi
- Les propriétés physiques correspondantes :
top,right,bottometleft - La propriété raccourcie
inset - Le raccourci en ligne correspondant :
inset-inline - Les propriétés
writing-mode,direction,text-orientation