CSS inset Property
Example
Set the distance to the parent element from the positioned <div> element:
div {
inset: 35px;
}
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The inset property sets the distance between an element and the parent element.
Note: For this property to take effect it has to have the position property specified.
The inset property is a shorthand property for the following properties:
Values for the inset property can be set in different ways:
If the inset property has four values:
- inset: 15px 30px 60px 90px;
- top distance is 15px
- right distance is 30px
- bottom distance is 60px
- left distance is 90px
If the inset property has three values:
- inset: 15px 30px 60px;
- top distance is 15px
- left and right distances are 30px
- bottom distance is 60px
If the inset property has two values:
- inset: 15px 30px;
- top and bottom distances are 15px
- left and right distances are 30px
If the inset property has one value:
- inset: 10px;
- all four distances are 10px
| Default value: | auto |
|---|---|
| Inherited: | no |
| Animatable: | yes. Read about animatable Try it |
| Version: | CSS3 |
| JavaScript syntax: | object.style.inset="100px 50px" Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| inset | 87.0 | 87.0 | 66.0 | 14.1 | 73.0 |
CSS Syntax
inset: auto|value|initial|inherit;
Property Values
| Value | Description | Demo |
|---|---|---|
| auto | Default. The element's default inset distance. | Demo ❯ |
| length | Specifies inset in px, pt, cm, etc. Negative values are allowed. Read about length units | Demo ❯ |
| % | Specifies distance in percent relative to size of parent element on the corresponding axis. | Demo ❯ |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
More Examples
Example
Set the inset property value of a <div> element to 15 pixels distance to parent from top and bottom, and to 30 pixels from left and right:
div {
inset: 15px 30px;
}
Try it Yourself »
Example
Set the inset property value of a <div> element to 15 pixels distance to parent from top, 30 pixels from left and right, and 60 pixels from bottom:
div {
inset: 15px 30px 60px;
}
Try it Yourself »
Example
Set the inset property value of a <div> element to 15 pixels distance to top, 30 pixels from right, 60 pixels from bottom, and to 90 pixels from left:
div {
inset: 15px 30px 60px 90px;
}
Try it Yourself »
Related Pages
CSS tutorial: CSS Position
CSS position property: CSS Position property
CSS bottom property: CSS Bottom property
CSS left property: CSS Left property
CSS right property: CSS Right property
CSS top property: CSS Top property
