inset-inline-end

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-end définit le décalage logique de fin en ligne d'un élément, qui correspond à un décalage physique selon le mode d'écriture, la direction et l'orientation du texte de l'élément. Elle correspond à la propriététop,right,bottom ouleft 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

writing-mode: horizontal-tb;

writing-mode: vertical-rl;

writing-mode: horizontal-tb;direction: rtl;

writing-mode: vertical-lr;

<section>  <div>    <div>      Je suis positionné absolument avec inset-inline-end: 50px    </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-element {  border: 0.75em solid;  padding: 0.75em;  position: relative;  width: 100%;  min-height: 200px;  unicode-bidi: bidi-override;}#abspos {  background-color: yellow;  color: black;  border: 3px solid red;  position: absolute;  inset-inline-end: 50px;  inline-size: 140px;  min-block-size: 80px;}

Syntaxe

css

/* Valeurs de type <length> */inset-inline-end: 3px;inset-inline-end: 2.4em;inset-inline-end: calc(anchor(self-start) + 5px);inset-inline-end: anchor-size(height);/* Valeurs relatives à la largeur du bloc englobant *//* Valeurs de type <percentage> */inset-inline-end: 10%;/* Valeurs avec un mot-clé */inset-inline-end: auto;/* Valeurs globales */inset-inline-end: inherit;inset-inline-end: initial;inset-inline-end: revert;inset-inline-end: revert-layer;inset-inline-end: unset;

La propriété raccourcie pourinset-inline-start etinset-inline-end estinset-inline.

Valeurs

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

Définition formelle

Valeur initiale	`auto`
Applicabilité	éléments positionnés
Héritée	non
Pourcentages	largeur logique du bloc englobant
Valeur calculée	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-end =
auto|
<length-percentage>

<length-percentage> =
<length>|
<percentage>

Exemples

Définir le décalage de fin en ligne

HTML

html

<div>  <p>Texte pour l'exemple</p></div>

CSS

css

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