inset

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: 3px 10px 3px 10px; /* haut gauche/droit bas */
inset: 2.4em 3em 3em 3em; /* haut droit bas gauche */
inset: 10px; /* la valeur est appliquée à l'ensemble des côtés */

/* 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.

Syntaxe formelle

<'top'>{1,4}

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

Spécification État Commentaires
CSS Logical Properties and Values Level 1
La définition de 'inset' dans cette spécification.
Brouillon de l'éditeur Définition initiale.
Valeur initialeauto
Applicabilitééléments positionnés
Héritéenon
Pourcentageshauteur logique du bloc englobant
Médiavisuel
Valeur calculéeidentiques aux propriétés qui décalent les boîtes : top, right, bottom, left sauf que ces directions sont logiques
Type d'animationune longueur, pourcentage ou calc() ;
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
inset
Expérimentale
Chrome Aucun support NonEdge Aucun support NonFirefox Support complet 66IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonFirefox Android Support complet 66Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.

Voir aussi