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

发布时间 2023-07-20 00:37:18作者: Zhentiw

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 toprightbottom 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