inset
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é raccourcie CSS inset correspond aux propriétés top, right, bottom et/ou left. Elle utilise la même syntaxe à valeurs multiples que la propriété raccourcie margin.
Ces propriétés d'encart, y compris inset, n'ont aucun effet sur les éléments non positionnés.
Exemple interactif
inset: 1em;
inset: 5% 0;
inset: 2em 50px 20px;
inset: 10px 30% 20px 0;
inset: 0;
<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;
}
Bien que faisant partie du module des propriétés et valeurs logiques CSS, cette propriété ne définit pas de décalages logiques. Elle définit des décalages physiques, quel que soit le mode d'écriture, la direction ou l'orientation du texte de l'élément.
Propriétés constitutives
Cette propriété est une abréviation pour les propriétés CSS suivantes :
Syntaxe
/* Valeurs de type <length> */
inset: 10px; /* la valeur est appliquée à l'ensemble des côtés */
inset: 4px 8px; /* haut/bas gauche/droit */
inset: 5px 15px 10px; /* haut gauche/droit bas */
inset: 2.4em 3em 3em 3em; /* haut droit bas gauche */
inset: calc(anchor(50%) + 10px) anchor(self-start) auto auto;
inset: anchor-size(block) calc(anchor(50%) + 10px) auto
calc(anchor-size(width) / 4);
/* pourcentages de la largeur/hauteur du bloc englobant */
inset: 10% 5% 5% 5%;
/* Valeur avec un mot-clé */
inset: auto;
/* Valeurs globales */
inset: inherit;
inset: initial;
inset: revert;
inset: revert-layer;
inset: unset;
Valeurs
La propriété inset prend 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 | relative to the containing block's size in the corresponding axis (e.g. width for left or right, height for top or bottom) |
| Valeur calculée | pour chaque propriété individuelle de la propriété raccourcie :
|
| Type d'animation | une longueur, pourcentage ou calc() ; |
Syntaxe formelle
inset =
<'top'>{1,4}
<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 pour un élément
HTML
<div>
<span class="exempleTexte">Texte d'exemple</span>
</div>
CSS
div {
background-color: yellow;
width: 150px;
height: 120px;
position: relative;
}
.exempleTexte {
writing-mode: sideways-rl;
position: absolute;
inset: 20px 40px 30px 10px;
background-color: #c8c800;
}
Résultat
Spécifications
| Specification |
|---|
| CSS Logical Properties and Values Module Level 1 # propdef-inset |
| CSS Positioned Layout Module Level 3 # propdef-inset |
Compatibilité des navigateurs
Voir aussi
- Les propriétés
top,right,bottometleft - Les propriétés
inset-blocketinset-inline - La propriété
position - Le module de positionnement CSS
- Propriétés et valeurs logiques CSS