Attribut inset-block-end CSS

Définition et utilisation

inset-block-end Définir la distance entre l'extrémité de l'élément et l'élément parent dans la direction du bloc.

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

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 du bloc et de la direction de la ligne.

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

Exemple

Exemple 1

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

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

Essayez-le vous-même

Exemple 2

Lorsque l'élément <div> a writing-mode Lorsque l'attribut est réglé sur vertical-rl, la direction du bloc est de droite à gauche. Le résultat est que la extrémité de l'élément se déplace de bas en gauche :

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

Essayez-le vous-même

Syntaxe CSS

inset-block-end: 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 Définit une distance avec des unités telles que px, pt, cm. 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 Réinitialise 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 : Prise en charge. Voir :Propriétés liées aux animations.
Version : CSS3
Syntaxe JavaScript : object.style.insetBlockEnd="100px"

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 Opéra
87.0 87.0 63.0 14.1 73.0

Pages associées

Tutoriel :Positionnement CSS

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

Référence :Attribut writing-mode CSS