inset
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2021.
Expérimental: Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.
La propriété inset
définit les décalages physiques d'un élément. Bien qu'elle fasse partie de la spécification sur les propriétés logiques, sa valeur ne dépend pas du mode d'écriture de l'élément, de sa direction ou de l'orientation du texte. La syntaxe de cette propriété suit la même structure que margin
, inset
est une propriété raccourcie permettant de définir les propriétés top
, right
, bottom
et/ou left
.
/* Valeurs de longueurs */
/* 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 */
/* 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: unset;
Syntaxe
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
CSS
div {
background-color: yellow;
width: 150px;
height: 120px;
position: relative;
}
.texteExemple {
writing-mode: vertical-lr;
position: absolute;
inset: 20px 40px 30px 10px;
background-color: #c8c800;
}
HTML
<div>
<span class="texteExemple">Texte d'exemple</span>
</div>
Résultat
Spécifications
Specification |
---|
CSS Logical Properties and Values Level 1 # propdef-inset |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
-
La propriété raccourcie physique
margin
-
Les propriétés physiques détaillées :
-
Les propriétés utilisées pour les autres propriétés logiques
writing-mode
,direction
,text-orientation