[CSS] Using `inset` to replace `top, right, bottom, left`

When working with positioned elements, you often write code like this:

.some-element {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

This can be simplified using an inset propety:

.some-element {
    position: absolute;
    inset: 0;
}

Or if you have different values for top, right, bottom and left, you can set them respectively in the order like: inset: -10px 0px -10px 0px. This shorthand works the same way as margin.

 

Other examples:

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