Positioning shorthand without four properties
The old way was to set top, right, bottom, and left one by one for full-bleed or overlay layouts. inset gives you one property that sets all four.
2 position: absolute;
3 inset: 0;
4}
2 position: absolute;
3 top: 0;
4 right: 0;
5 bottom: 0;
6 left: 0;
7}
Browser Support for inset
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2021.
Your first month is free
Managed WordPress hosting for faster sites.
One line
One property instead of four. Same effect, less repetition and fewer chances to forget a side.
Same as margin/padding
inset follows the same multi-value pattern: one value for all, two for vertical/horizontal, four for each side.
Readable
inset: 0 reads as "pin to all edges." Clear intent for overlays and full-bleed positioned elements.
How it works
The old way: for a full-bleed overlay or any positioned element that should stretch to all edges, you set top: 0; right: 0; bottom: 0; left: 0. Four declarations, easy to miss one or get the order wrong.
The modern way: use inset: 0. It sets all four sides in one shot. You can use one value (all sides), two (vertical, horizontal), or four (top, right, bottom, left). Same syntax idea as margin or padding. Works with absolute, fixed, and sticky.