Atributo CSS inset

Definição e uso

inset A propriedade é usada para definir a distância entre o elemento e seu elemento pai.

注意:Note: To make this property effective, it is necessary to specify position

inset property.

inset right

The values of the property can be set in different ways:

inset: 15px 30px 60px 90px;
  • If the inset property has three values:
  • If the inset property has four values:
  • The top distance is 15px
  • The right distance is 30px

The left distance is 90px

The attribute value sets the distance from the top to the parent element to 15 pixels, from the left and right to the parent element to 30 pixels, and from the bottom to the parent element to 60 pixels:
  • If the inset property has three values:
  • The top and bottom distances are 15px
  • The top distance is 15px

The bottom distance is 60px

Example 2
  • If the inset property has two values:
  • The top and bottom distances are 15px

The left and right distances are 30px

If the inset property has one value:
  • inset: 10px;

The distances in all four directions are 10px

Instance

Example 1

div {
  Sets the distance of the positioned <div> element from the parent element:
}

Try It Yourself

Example 1

Sets the attribute value of the <div> element inset The attribute value sets the distance from the top and bottom to the parent element to 15 pixels, from the left and right to the parent element to 30 pixels:

div {
  Example 2
}

Try It Yourself

The attribute value sets the distance from the top and bottom to the parent element to 15 pixels, from the left and right to the parent element to 30 pixels:

Sets the attribute value of the <div> element inset Example 3

div {
  The attribute value sets the distance from the top to the parent element to 15 pixels, from the left and right to the parent element to 30 pixels, and from the bottom to the parent element to 60 pixels:
}

Try It Yourself

Example 4

Sets the attribute value of the <div> element inset The attribute value sets the distance from the top to the parent element to 15 pixels, from the right to the parent element to 30 pixels, from the bottom to the parent element to 60 pixels, and from the left to the parent element to 90 pixels:

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

Try It Yourself

CSS Syntax

inset: auto|length|initial|inherit;

Attribute Value

Value Description
auto Default Value. The default inset distance of the element.
length Specify the distance using fixed units (such as px, pt, cm, etc.). Negative values are allowed. See:Unidades CSS.
% Specify the distance using percentages, relative to the parent element's size on the corresponding axis.
initial Sets this property to its default value. See initial.
inherit Inherits this property from its parent element. See inherit.

Technical Details

Default Value: auto
Inheritance: No
Animation Creation: Supported. See:Animation-related properties.
Version: CSS3
JavaScript Syntax: object.style.inset="100px 50px"

Browser Support

The numbers in the table represent the browser version that first fully supports this property.

Chrome Edge Firefox Safari Opera
87.0 87.0 66.0 14.1 73.0

Páginas relacionadas

Tutorial:Posicionamento CSS

Referência:Propriedade CSS position

Referência:Propriedade bottom do CSS

Referência:Atributo CSS left

Referência:Propriedade CSS right

Referência:Propriedade top do CSS