Propriété inset-block CSS

Page précédente inset
Page suivante inset-block-end

Définition et utilisation

inset-block L'élément de paramètres de propriété est à une distance de l'élément parent dans la direction de bloc.

Note :要使此属性生效，必须指定 position Pour que cet attribut fonctionne, il est nécessaire de spécifier

inset-block position

inset-block inset-block-start

Les valeurs de l'attribut peuvent être définies de différentes manières :

inset-block: 10px 50px;

Si l'attribut inset-block a deux valeurs :
La distance de départ est de 10px

La distance de fin est de 50px

Si l'attribut inset-block a une valeur :

inset-block: 10px;

Les valeurs de départ et de fin de l'inset-block sont toutes deux de 10px inset-inline 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 la direction d'inline.

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

Exemple

Exemple 1

Définir la distance entre un élément <div> positionné et son élément parent dans la direction de bloc :

div {
  inset-block: 10px 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 position de départ de l'élément est déplacée vers la droite depuis le haut et la position de fin est déplacée vers la gauche depuis le bas :

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

Essayez-le vous-même

Syntaxe CSS

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

Valeur de l'attribut

Valeur	Description
auto	Valeur par défaut. Valeur par défaut de l'inset-block 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è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 :	Prise en charge. Voir :Propriétés liées aux animations.
Version :	CSS3
Syntaxe JavaScript :	object.style.insetBlock="100px 50px"