Attribut inset-inline-start de CSS

Page précédente inset-inline-end
Page suivante isolation

定义和用法

inset-inline-start 属性设置元素在行方向上的起始端与其父元素之间的距离。

Remarque :L'attribut définit la distance entre le point de départ de l'élément dans la direction de lecture et l'élément parent. Pour que cet attribut fonctionne, il est nécessaire de spécifier position

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

Remarque :les attributs CSS associés writing-mode et direction Définit la direction de lecture. Cela affecte la position de départ de l'élément dans la direction de lecture ainsi que inset-inline-start 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 le point de départ de l'élément <div> positionné et l'élément parent dans la direction de lecture :

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

Essayer par vous-même

Exemple 2

Lorsque l'attribut de l'élément <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 le point de départ de l'élément se déplace du côté gauche vers le haut :

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

Essayer par vous-même

Exemple 3

Lorsque l'attribut de l'élément <div> direction Lorsque la valeur de l'attribut est définie sur rtl, la direction de lecture est de droite à gauche. La description contient une petite erreur de frappe, qui devrait être : "Le point de départ de l'élément reste à droite (parce que pour rtl, le point de départ est déjà à droite, mais par rapport au schéma par défaut ltr, tout le contenu est inversé)" :

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

Essayer par vous-même

Grammaire CSS

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

Valeur de l'attribut

Valeur	Description
auto	Valeur par défaut. La distance d'insertion par défaut de l'élément.
length	Spécifier la distance en unités telles que px, pt, cm, etc. Les valeurs négatives sont autorisées. Voir :Unités CSS.
%	Définir la distance en pourcentage de la taille de l'axe correspondant par rapport à l'élément parent.
initial	Règle 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
Création d'animation :	Pris en charge. Voir :Propriétés liées aux animations.
Version :	CSS3
Grammaire JavaScript :	object.style.insetInlineStart="30%"