TIL – CSS inset property shorthand

I recently learned about inset, a CSS shorthand for top, right, left, and bottom properties.

I've used it a lot as a more expressive way of saying, "this thing is full-screen".

For example, to make an element take over the entire screen:

.fullscreen {
  position: fixed;
  inset: 0;
}

It's effectively the same thing as:

.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

// or, what I always used to do...

.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}

MDN Docs: https://developer.mozilla.org/en-US/docs/Web/CSS/inset