CSS inset Property

Comments (0)

Views (518)

Finally, the inset property has arrived for a short use that we can use with position. In this way, you can now define top left right bottom values in a single property.

For example, a structure like this;

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

Now you can write like this

div {
    position: absolute;
    inset: 0;
}

Just like the margin and padding properties, you can define double, triple or quadruple clockwise. For example;

div {
    position: absolute;
    inset: 10px; /* top/right/bottom/left */
    inset: 10px 20%; /* top/bottom -- right/left */
    inset: 10px 20% 3em; /* top -- right/left -- bottom */
    inset: 10px 15px 20px 25px; /* top -- right -- bottom -- left */
}

Currently all modern browsers support it except IE and Edge.

https://caniuse.com/?search=inset

When you are stuck while you are coding or when you need to relax yourself comment section is waiting for you. Ask what you don't know, answer what you know !