[Duda] Duda

muy buena pregunta, y ni investigando me queda tan claro en lo que investigue se refiere a una abreviatura de top, right, bottom y/o left que pertenecen al margin, solo que inset se usa para establecer valores especificos para cada elemento y margin lo hace en conjunto. de esa forma podemos ser mas especificos espero alguien venga a ayudarnos tambien

El inset sirve para colocar sombras hacia dentro de un elemento.

Cuando no ocupamos inset, los primeros 2 parámetros de box-shadow (posición en X, posición en Y) parten desde el borde del elemento (en este caso una imagen) hacia afuera.

Ejemplo:

box-shadow: 5px 10px black;

Tendríamos una sombra 5px hacia la derecha del borde derecho de la imagen y 10px hacia abajo del borde inferior de la imagen.

Ahora si colocamos inset:

box-shadow: inset 5px 10px black;

Ahora tendríamos una sombra 5px hacia la derecha del borde izquierdo de la imagen y 10px hacia abajo del borde superior de la imagen.

Como puedes notar la diferencia está en que cuando no usas inset la sombra va hacia afuera pues para números positivos x,y la sombra siempre parte desde el borde derecho inferior de la imagen mientras que para números negativos de x,y la sombra parte desde el borde izquierdo superior.

Al utilizar inset invertimos el punto de partida de la sombra, lo que establecemos es que nuestros valores positivos de x,y partan desde la esquina superior izquierda y los negativos x,y partan desde el borde derecho inferior, de este modo ahora la sombra da la impresión de que se muestra hacia adentro del elemento en lugar de mostrarse como una proyección hacia afuera.

NOTA IMPORTANTE: Las sombras internas (cuando si se usa inset) no se pueden apreciar en una imagen pues la imagen cubre la sombra, para ilustrar mejor una sombra interna puedes experimentar con un elemento div o section para que puedas apreciar como se comporta "inset"