What's New in CSS - Ste Greig

inset Shorthand

Again, this property has been around a few years now (2021) but is a nice shortener to be aware of.

It's a shorthand for the top, right, bottom and left properties (in that order) on positioned elements.

div {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

div {
  /* inset: 0 0 0 0; */
  inset: 0;
}

<div class="top-0 right-0 bottom-0 left-0"></div>

<div class="inset-0"></div>

div {
  inset: 25%;
}

<div class="inset-1/4"></div>

div {
  /* inset: 0 33.333% 0 33.333% */
  inset: 0 33.333%;
}

<div class="inset-y-0 inset-x-1/3"></div>

div {
  inset: 0 0 0 50%;
}

<div class="inset-y-0 left-1/2 right-0"></div>

div {
  inset: 75% 0 0 0;
}

<div class="inset-x-0 bottom-0 top-3/4"></div>