CSS Shorthand - Positioning all 4 sides with one Inset property

Hello, Friends, I'm back with a new article that will guide you to use this new CSS Property INSET which can be used as a shorthand for positioning values, refer to the image above.

Developers get tired of writing the same position values like a top, right, bottom and left separately what if there will be a shortcut like a margin or a border property for the position values.

Yes, Now we have the property which is like margin and border where we can specify all 4 sides in a single line.

Before:

#element {

    position: absolute; /* can be any position like relative, fixed */

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

}

Now:

#element {

    position: absolute;

    inset: 0; //

}

How it works if we have different position values?

Inset Property Explanation:

If 4 Values:

 

    inset: top  right  bottom  left;

    inset: 10px  20px   30px   40px;

If 3 Values:

   

    inset: top  left and right bottom;

    inset: 10px   20px    30px;

If 2 Values:

   

    inset: top and bottom right & left;

    inset:  10px   20px;

If 1 Value:

   

    inset: top right bottom left;

    inset:  10px;

Yes, like I mentioned above, you can assume this property similar to a margin and a border.

What about the compatibility? Whether it is supported by top browsers?

According to MDN, This property is supported by all the major browsers like chrome, firefox and safari please refer to the MDN Compatibility chart to know about all the browsers.

Compatible with (Edge 79, Firefox 66, Safari 14, Chrome 87, Opera 73)

Inset Property Compatibility Chart - MDN Docs

Conclusion: Thanks for following this article to determine how inset property works and its coompatibility. If  you have any doubts or questions please feel free to comment.