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.
Example
<div class="outer">
  <div class="inner">
    Some text
  </div>
</div>
.outer {
  background-color: cyan;
  position: relative;
  width: 500px;
  height: 500px;
}
Top, right, bottom and left
https://jsfiddle.net/jqx68wem/ Show archive.org snapshot
.inner {
  background-color: darkCyan;
  position: absolute;
  top: 10px;
  right: 10px;
  bottom: 10px;
  left: 10px;
}
Inset
https://jsfiddle.net/jqx68wem/1/ Show archive.org snapshot
.inner {
  background-color: darkCyan;
  position: absolute;
  inset: 10px;
}
Note you can use "auto". For example if you want to place something in the top right corner, you can use
.inner {
  inset: 0 0 auto auto;
}
Posted by Emanuel to makandra dev (2022-07-18 05:55)