inset
=====

**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 initiale | pour chaque propriété individuelle de la propriété raccourcie :* `top`: `auto`
* `bottom`: `auto`
* `left`: `auto`
* `right`: `auto`
 |
| 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 :* `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'animation | une longueur, pourcentage ou calc() ; |

Syntaxe formelle
----------------
```

inset =   
  <'top'>{1,4}    
  
```

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 with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* La propriété raccourcie physique `margin`
* Les propriétés physiques détaillées :
    + `top`,
    + `right`,
    + `bottom`,
    + `left`
* Les propriétés utilisées pour les autres propriétés logiques `writing-mode`, `direction`, `text-orientation`