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.

Expérimental: Il s'agit d'une technologie expérimentale.
Vérifiez attentivement le tableau de compatibilité des navigateurs avant de l'utiliser en production.

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;

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}  

<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
CSS Positioned Layout Module Level 3 # propdef-inset

Compatibilité des navigateurs

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

Help improve MDN

Learn how to contribute

Cette page a été modifiée le ⁨24 juin 2025⁩ par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content