Inset this one

If I say top, left, right, and bottom, I imagine that you’re thinking about absolutely positioned elements. But what if I say ‘inset’? This is what we usually do.

.container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

But we have a shorthand! ‘Inset’ is a shorthand for the four inset properties: top, right, bottom, and left all in one declaration. It works exactly the same way as margin and padding, and you can use it in the same way as well.

.container {
  position: absolute;
  inset: 0;
}

inset: 2em 4em 8em 0; /* top right bottom left */
inset: 20% 10% 30%; /* top left/right bottom */
inset: 0 10px; /* top/bottom left/right */
inset: 24px; /* all edges = 20px */

Easy and clean!