propriété inset-inline-end de CSS

Page précédente inset-inline
Page suivante inset-inline-start

Définition et utilisation

inset-inline-end L'attribut définit la distance entre l'extrémité de l'élément dans la direction de lecture et l'élément parent.

Remarque :Pour que cet attribut fonctionne, il est nécessaire de spécifier position Les attributs

CSS inset-inline et inset-block Les attributs sont similaires à ceux de CSS top,bottom,left et right L'attribut est très similaire, mais inset-block et inset-inline L'attribut dépend de la direction de bloc et de lecture.

Remarque :les propriétés CSS associées writing-mode et direction Définit la direction de lecture. Cela affecte la position de l'extrémité de l'élément dans la direction de lecture ainsi que inset-inline-end Le résultat de l'attribut. Pour les pages en anglais, la direction de lecture est de gauche à droite, et la direction de bloc est vers le bas.

Exemple

Exemple 1

Définir la distance entre l'extrémité de l'élément <div> positionné et l'élément parent dans la direction de lecture :

div {
  inset-inline-end: 50px;
}

Essayez-le vous-même

Exemple 2

Lorsque l'attribut <div> writing-mode Lorsque la valeur de l'attribut est définie sur vertical-rl, la direction de lecture est vers le bas. Le résultat est que l'extrémité de l'élément se déplace du côté droit vers le bas :

div {
  inset-inline-end: 50px;
  writing-mode: vertical-rl;
}

Essayez-le vous-même

Exemple 3

Lorsque l'attribut <div> direction Lorsque la valeur de l'attribut est définie sur rtl, la direction de lecture est de droite à gauche. Le résultat est que la extrémité de l'élément se déplace de la droite vers la gauche :

div {
  inset-inline-end: 50px;
  direction: rtl;
}

Essayez-le vous-même

Syntaxe CSS

inset-inline-end: auto|length|initial|inherit;

Valeur de l'attribut

Valeur	Description
auto	Valeur par défaut. La distance d'encastrement par défaut de l'élément.
length	Définit une distance en px, pt, cm, etc. Les valeurs négatives sont autorisées. Voir :Unités CSS.
%	Définit une distance en pourcentage par rapport à la taille de l'élément parent sur l'axe correspondant.
initial	Définit cette propriété à sa valeur par défaut. Voir : initial.
inherit	Inherits this property from its parent element. Voir : inherit.

Détails techniques

Valeur par défaut :	auto
Héritabilité :	Non
Réalisation des animations :	Prise en charge. Voir :Propriétés liées aux animations.
Version :	CSS3
Syntaxe JavaScript :	object.style.insetInlineEnd="30%"