inset: сокращение для четырёх смещений
inset объединяет top, right, bottom и left для позиционированного элемента.
Назначение
inset объединяет top, right, bottom и left для позиционированного элемента.
Как это работает
Одно значение применяется ко всем сторонам, четыре следуют порядку сверху по часовой стрелке. Это физическое сокращение: для смысловых направлений существуют отдельные логические свойства.
Пример
<style>
.box{position:relative;min-height:120px;padding:24px}.frame{position:absolute;inset:8px;border:2px dashed #11694e;pointer-events:none}
</style>
<div class="box">Содержимое контейнера<span class="frame" aria-hidden="true"></span></div>Что должно получиться
Декоративная рамка отступает на 8px от четырёх сторон своего содержащего блока. Она не занимает места в обычном потоке и не перехватывает указатель.
Граница применения и частая ошибка
На обычный статический элемент inset не действует как внутренний отступ. Также абсолютное позиционирование требует понимания содержащего блока, иначе слой окажется привязан не к той области.
Самостоятельная проверка
Измените inset:8px на 0, затем удалите position:relative у родителя в отдельном примере. Объясните, откуда теперь рассчитываются границы абсолютного элемента.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.