Propriété inset de CSS

Page précédente inline-size
Page suivante inset-block

Définition et utilisation

inset La propriété est utilisée pour définir la distance entre un élément et son élément parent.

注意：要使该属性生效，必须指定 Attention : Pour que cette propriété fonctionne, il est nécessaire de spécifier

inset position

L'attribut est une forme abrégée des attributs suivants :
top
bottom
left

inset right

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

inset: 15px 30px 60px 90px;

Si l'attribut inset a trois valeurs :
Si l'attribut inset a quatre valeurs :
La distance supérieure est de 15px
La distance latérale droite est de 30px

La distance latérale gauche est de 90px

inset: 15px 30px 60px;

Si l'attribut inset a trois valeurs :
Les distances verticales sont de 15px
La distance supérieure est de 15px

La distance inférieure est de 60px

La valeur de l'attribut est définie à 15 pixels de distance en haut et en bas du parent, et 30 pixels de distance en haut et en bas du parent :

Si l'attribut inset a deux valeurs :
Les distances verticales sont de 15px

Les distances latérales sont de 30px

Si l'attribut inset a une valeur :

inset: 10px;

Les distances des quatre directions sont de 10px

Exemple

Exemple 1

div {
  Définissez la distance de l'élément <div> positionné par rapport à l'élément parent :
}

Essayez-le vous-même

inset: 35px;

div {
  La valeur de l'attribut est définie à 15 pixels de distance en haut et en bas du parent, et 30 pixels de distance en haut et en bas du parent :
}

Essayez-le vous-même

inset: 15px 30px;

div {
  inset: 15px 30px 60px;
}

Essayez-le vous-même

Exemple 4

Définissez la valeur de l'attribut de l'élément <div> pour la distance en haut du parent en 15 pixels, à droite et à gauche du parent en 30 pixels, et en bas du parent en 60 pixels : inset La valeur de l'attribut est définie à 15 pixels de distance du parent en haut, 30 pixels de distance du parent à droite, 60 pixels de distance du parent en bas et 90 pixels de distance du parent à gauche :

div {
  inset: 15px 30px 60px 90px;
}

Essayez-le vous-même

Grammaire CSS

inset: auto|length|initial|inherit;

Valeur de l'attribut

Valeur	Description
auto	Valeur par défaut. La distance par défaut d'inset de l'élément.
length	Spécifiez la distance en unités fixes (comme px, pt, cm, etc.). Les valeurs négatives sont autorisées. Voir :Unités CSS.
%	Spécifiez la 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 cette propriété de son élément parent. Voir : inherit.

Détails techniques

Valeur par défaut :	auto
Héritabilité :	Non
Réalisation d'animation :	Prise en charge. Voir :Propriétés liées aux animations.
Version :	CSS3
Grammaire JavaScript :	object.style.inset="100px 50px"