CSS inset Özelliği

Sonunda position ile kullanabileceğimiz bir kısa kullanım için inset özelliği geldi. Bu sayede artık top left right bottom değerlerini tek bir özellikte tanımlayabilirsiniz.

Örneğin şöyle bir yapıyı;

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

artık şöyle yazabilirsiniz

div {
    position: absolute;
    inset: 0;
}

tıpkı margin ve padding özellikleri gibi saat yönünde ikili, üçlü ya da dörtlü tanım yapabilirsiniz. Örneğin;

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 */
}

Tarayıcı Desteği

Şu an için IE ve Edge hariç tüm modern tarayıcılar desteklemektedir.
https://caniuse.com/?search=inset