CSS inset Property
Example
span {
inset: 20px 40px 30px 10px;
}Hello World!
Meaning:
The inset CSS property is a shorthand that corresponds to the top, right, bottom, and/or left properties.
It has the same multi-value syntax of the margin shorthand.
How to use inset property:
1. If inset property has 4 values: inset: 10px 20px 30px 40px;
- top-left inset is 10px
- top-right inset is 20px
- bottom-right inset is 30px
- bottom-left inset is 40px
Example:
Hello World!
2. If inset property has 4 values: inset: 10px 20px 30px;
- top-left inset is 10px
- top-right and bottom-left inset are 20px
- bottom-right inset is 30px
Example:
Hello World!
3. If inset property has 2 values: inset: 10px 20px;
- top-left and bottom-right inset are 10px
- top-right and bottom-left inset are 20px
Example:
Hello World!
4. If inset property has 1 values: inset: 10px;
- top-left, bottom-right, top-right and bottom-left inset are 10px
Example:
Hello World!
| Default value: | auto (auto auto auto auto) |
| Inherited: | No |
| Animatable: | Yes |
| Version: | CSS3 |
| JavaScript syntax: | |
Standard Syntax
inset: auto|length|%|initial|inherit|revert|revert-layer|unset;Browser Support
Status
Property Values
The following table describes the values of this property:
| Value | Description |
|---|---|
| auto | This is default value. The browser calculates the inset edge position. |
| length | Specifies the offset as a length value in px, pt, cm, em, etc. Negative length values are allowed. |
| %(percentage) | Specifies the offset in percentage. The percentage is calculated with respect to the width of the element's containing block. Negative percentage values are allowed. |
| initial | Sets this property to its default value. |
| inherit | If specified, the associated element takes the computed value of its parent element animation-delay property. |
| revert | Reverts the cascaded value of the property from its current value to the value the property |
| revert-layer | Rollback styles to the ones specified in previous cascade layers. |
| unset | Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not. |
Default CSS Property Values
selectors {
inset: auto;
}