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.

css
/* 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 initialepour chaque propriété individuelle de la propriété raccourcie :
Applicabilitééléments positionnés
Héritéenon
Pourcentagesrelative to the containing block's size in the corresponding axis (e.g. width for left or right, height for top or bottom)
Valeur calculéepour chaque propriété individuelle de la propriété raccourcie :
  • top: si spécifié par une longueur, la valeur absolue correspondante; si spécifié par un pourcentage, la valeur telle que spécifiée; sinon, auto
  • bottom: si spécifié par une longueur, la valeur absolue correspondante; si spécifié par un pourcentage, la valeur telle que spécifiée; sinon, auto
  • left: si spécifié par une longueur, la valeur absolue correspondante; si spécifié par un pourcentage, la valeur telle que spécifiée; sinon, auto
  • right: si spécifié par une longueur, la valeur absolue correspondante; si spécifié par un pourcentage, la valeur telle que spécifiée; sinon, auto
Type d'animationune 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

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

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