inset-inline

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.

La propriétéCSSinset-inline définit les décalages logiques de début et de fin d'un élément dans la direction en ligne, qui correspondent à des décalages physiques selon le mode d'écriture, la direction et l'orientation du texte de l'élément. Elle correspond aux propriétéstop etbottom, ouright etleft selon les valeurs définies pourwriting-mode,direction ettext-orientation.

Cettepropriété d'encart n'a aucun effet sur les éléments non positionnés.

Exemple interactif

inset-inline: 5% 10%;writing-mode: horizontal-tb;

inset-inline: 10px 40px;writing-mode: vertical-rl;

inset-inline: 5% 10%;writing-mode: horizontal-tb;direction: rtl;

<section>  <div>    <div>Je suis positionné absolument.</div>    <p>      Il y a autant de boue dans les rues que si les eaux venaient à peine de se      retirer de la surface de la terre, et il ne serait pas étonnant de croiser      un Mégalosaure, long d'une douzaine de mètres, se dandinant comme un      lézard éléphantesque dans Holborn Hill.    </p>  </div></section>

.example-container {  border: 0.75em solid #ad1457;  padding: 0.75em;  text-align: left;  position: relative;  width: 100%;  min-height: 200px;}#example-element {  background-color: #07136c;  border: 6px solid #ffa000;  color: white;  position: absolute;  inset: 0;}

Propriétés constitutives

Cette propriété est une abréviation pour les propriétés CSS suivantes :

Syntaxe

css

/* Valeurs de type <length> */inset-inline: 3px 10px;inset-inline: 2.4em 3em;inset-inline: 10px; /* La valeur est appliquée des deux côtés */inset-inline: auto calc(anchor(self-start) + 20px);inset-inline: 400px anchor-size(--my-anchor height, 100px);/* Les valeurs en pourcentage sont relatives à la largeur ou à la hauteur du bloc englobant *//* Valeurs de type <percentage> */inset-inline: 10% 5%;/* Valeur avec un mot-clé */inset-inline: auto;/* Valeurs globales */inset-inline: inherit;inset-inline: initial;inset-inline: revert;inset-inline: revert-layer;inset-inline: unset;

Valeurs

La propriétéinset-inline peut prendre les mêmes valeurs que la propriétéleft.

Définition formelle

Valeur initiale	pour chaque propriété individuelle de la propriété raccourcie : `inset-inline-start`:`auto` `inset-inline-end`:`auto`
Applicabilité	éléments positionnés
Héritée	non
Pourcentages	largeur logique du bloc englobant
Valeur calculée	pour chaque propriété individuelle de la propriété raccourcie : `inset-inline-start`: identiques aux propriétés qui décalent les boîtes :`top`,`right`,`bottom`,`left` sauf que ces directions sont logiques `inset-inline-end`: identiques aux propriétés qui décalent les boîtes :`top`,`right`,`bottom`,`left` sauf que ces directions sont logiques
Type d'animation	unelongueur,pourcentage ou calc() ;

Syntaxe formelle

inset-inline =
<'top'>{1,2}

<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

Définir les décalages de début et de fin en ligne

HTML

html

<div>  <p>Texte d'exemple</p></div>

CSS

css

div {  background-color: yellow;  width: 120px;  height: 120px;}.exempleTexte {  writing-mode: vertical-lr;  position: relative;  inset-inline: 20px 50px;  background-color: #c8c800;}