Atributo CSS inset
- Página anterior inline-size
- Próxima página inset-block
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: }
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 }
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: }
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; }
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
- Página anterior inline-size
- Próxima página inset-block