Attribut inset-inline CSS

Définition et utilisation

inset-inline L'attribut définit la distance entre l'élément et son élément parent dans la direction de ligne.

Note :Pour que cet attribut fonctionne, il est nécessaire de spécifier position Attribut.

inset-inline Cet attribut est une abréviation des attributs suivants :

inset-inline La valeur de l'attribut peut être définie de différentes manières :

Si l'attribut inset-inline a deux valeurs :

inset-inline: 10px 50px;
  • La distance de début est de 10px
  • La distance de fin est de 50px

Si l'attribut inset-inline a une valeur :

inset-inline: 10px;
  • La distance du point de départ et de fin est de 10px

inset-inline et inset-block Les attributs haut,bas,gauche et droite Les attributs sont très similaires, mais inset-block et inset-inline L'attribut dépend de la direction du bloc et de la direction de la ligne.

Note :les attributs CSS associés writing-mode et direction Définit la direction de la ligne. Cela affecte le point de départ et de fin de la ligne, ainsi que inset-inline Le résultat de l'attribut. Pour les pages en anglais, la direction de la ligne est de gauche à droite et la direction du bloc est vers le bas.

Exemple

Exemple 1

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

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

Essayez-le vous-même

Exemple 2

Lorsque l'attribut writing-mode Lorsque la valeur de l'attribut est définie sur vertical-rl, la direction de la ligne est vers le bas. Le résultat est que le point de départ de l'élément se déplace de la gauche vers le haut et le point de fin se déplace de la droite vers le bas :

div {
  inset-inline: 15px 30px;
  writing-mode: vertical-rl;
}

Essayez-le vous-même

Exemple 3

Lorsque l'attribut direction Lorsque la valeur de l'attribut est définie sur rtl, la direction de la ligne est de droite à gauche. Le résultat est que le point de départ de l'élément se déplace de la gauche vers la droite et le point de fin se déplace de la droite vers la gauche :

div {
  inset-inline: 15px 30px;
  direction: rtl;
}

Essayez-le vous-même

Syntaxe CSS

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

Valeur de l'attribut

Valeur Description
auto Valeur par défaut. La distance par défaut d'inset-inline de l'élément.
length Définit la distance avec des unités telles que px, pt, cm. Les valeurs négatives sont autorisées. Voir :Unités CSS.
% Définit 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
Réalisation des animations : Prise en charge. Voir :Propriétés liées aux animations.
Version : CSS3
Syntaxe JavaScript : object.style.insetInline="100px 50px"

Prise en charge du navigateur

Les nombres dans le tableau représentent la version du navigateur qui prend en charge cette propriété pour la première fois.

Chrome Edge Firefox Safari Opera
87.0 87.0 63.0 14.1 73.0

pages associées

Tutoriel :Positionnement CSS

Référence :Attribut position CSS

Référence :Propriété direction de CSS

Référence :Attribut writing-mode CSS