CSS inset — скорочення для top, right, bottom, left

CSS властивість inset — це скорочення для top, right, bottom і left, записане одним рядком за тими ж правилами, що й margin.

правити

Загальний опис

Найчастіше її пишуть як inset: 0 — це миттєво розтягує позиційований елемент на весь батьківський контейнер. Чотири рядки перетворюються на один.

Значень може бути від одного до чотирьох, і читаються вони за годинниковою стрілкою від верху: inset: 10px 20px 30px 40px.

правити

Порада

position: absolute; inset: 0 — найкоротший спосіб зробити оверлей на весь батьківський блок.

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

inset: <top> <right> <bottom> <left>;

Властивість inset може отримувати 3 значень:

auto

Позиція визначається браузером.

автор: NagarD

правити

length

Зсув від відповідного краю.

автор: NagarD

правити

percentage

Зсув у відсотках від розміру блока-контейнера.

автор: NagarD

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	87	66	14.1	73	87	—

Підтримка: мобільні переглядачі

Переглядач
	87	87	66	14.5

Приклади

+ запропонувати свій приклад у пісочниці

<figure class="cover">
    <img src="/img/logo.svg" alt="">
    <div class="overlay">Текст поверх</div>
</figure>

.cover {
    position: relative;
    width: 300px;
}

.overlay {
    position: absolute;
    inset: 0;               /* = top/right/bottom/left: 0 */
    display: grid;
    place-items: center;
    background: rgb(0 0 0 / .5);
    color: #fff;
}