Using the inset CSS property

A few months back, I learned about the inset property in CSS and was pleasantly surprised by it. I still haven't seen it in the wild all that much, so I thought I'd take a moment to share some thoughts on it and why I think it's a pretty useful tool to have in your CSS toolbox.
<baseline-support featureId="logical-properties">
</baseline-support>
The inset property is a shorthand for top, right, bottom, and left. This can save you from the tedious process of defining these properties individually, as you can use inset to set them all at once.
Although the inset property is defined in the CSS Logical Properties and Values Module, it is a physical property, not a logical one. This means it always refers to the physical dimensions (top, right, bottom, left) of an element, regardless of the writing mode or text direction (e.g., left-to-right or right-to-left).

<div class="box"></div>

</baseline-support>
The inset property is a shorthand for top, right, bottom, and left. This can save you from the tedious process of defining these properties individually, as you can use inset to set them all at once.
Although the inset property is defined in the CSS Logical Properties and Values Module, it is a physical property, not a logical one. This means it always refers to the physical dimensions (top, right, bottom, left) of an element, regardless of the writing mode or text direction (e.g., left-to-right or right-to-left).
If you need logical positioning (e.g., inline-start, block-end), you'll need to use the logical properties instead.
@Further reading
One important thing to remember is that the inset property only works on positioned elements. This means the element must have a position value of absolute, relative, fixed, or sticky. Without a position value, the inset property will have no effect.

From 30-seconds-of-code: inset