inset
The inset shorthand sets the top, right, bottom, and left offsets of a positioned element at once.
Syntax
inset: <top> <right> <bottom> <left>; /* 1 to 4 values */
Examples
.overlay {
position: fixed;
inset: 0;
}
.badge {
position: absolute;
inset: 0.5rem 0.5rem auto auto;
}
Output
Stretches the overlay across the full viewport and pins the badge to the top-right corner.
Notes
inset:0 is the concise way to make a positioned element fill its containing block. It only affects elements with position other than static. Logical equivalents inset-block and inset-inline also exist.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 87 |
| firefox | 66 |
| safari | 14.1 |
| edge | 87 |