inset

Определение и применение

Свойство inset задаёт сразу четыре физических смещения позиционированного элемента: сверху, справа, снизу и слева. Короткая запись inset: 0 удобна, когда нужно растянуть слой по всей области содержащего блока.

Откуда отсчитываются смещения позиционированного элемента — в уроке «Позиционирование элементов. Часть 1: relative, absolute и fixed».

Попробуйте значения inset

<div class="stage">
  <div class="container">
    <div class="demo-target">Блок</div>
  </div>
</div>

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 340px;
  padding: 16px;
  background: white;
  color: #172c3d;
  font: 16px/1.5 system-ui;
}
.container {
  position: relative;
  height: 190px;
  border: 2px dashed #52697d;
}
.demo-target {
  position: absolute;
  display: grid;
  place-items: center;
  background: #b9d7eb;
  border: 2px solid #245a85;
  inset: 0;
}

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 340px;
  padding: 16px;
  background: white;
  color: #172c3d;
  font: 16px/1.5 system-ui;
}
.container {
  position: relative;
  height: 190px;
  border: 2px dashed #52697d;
}
.demo-target {
  position: absolute;
  display: grid;
  place-items: center;
  background: #b9d7eb;
  border: 2px solid #245a85;
  inset: 20px;
}

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 340px;
  padding: 16px;
  background: white;
  color: #172c3d;
  font: 16px/1.5 system-ui;
}
.container {
  position: relative;
  height: 190px;
  border: 2px dashed #52697d;
}
.demo-target {
  position: absolute;
  display: grid;
  place-items: center;
  background: #b9d7eb;
  border: 2px solid #245a85;
  inset: 10px 40px;
}

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 340px;
  padding: 16px;
  background: white;
  color: #172c3d;
  font: 16px/1.5 system-ui;
}
.container {
  position: relative;
  height: 190px;
  border: 2px dashed #52697d;
}
.demo-target {
  position: absolute;
  display: grid;
  place-items: center;
  background: #b9d7eb;
  border: 2px solid #245a85;
  inset: 10%;
}

Поддержка браузерами

Спецификации: CSS logical, CSS position

✓Поддерживается во всех основных браузерах с 2021 года.

Показать браузеры

ВсеКомпьютерыМобильные

Совместимостьcss.properties.inset

Возможность	Компьютеры					Мобильные
	ChromeChrome	EdgeEdge	FirefoxFirefox	OperaOpera	SafariSafari	Chrome AndroidChromeAndroid	Firefox for AndroidFirefoxAndroid	Opera AndroidOperaAndroid	Safari on iOSSafariiOS	Samsung BrowserSamsungAndroid	WebView AndroidWebViewAndroid	WebView on iOSWebViewiOS
inset	✓87	✓87	✓66	✓73	✓14.1	✓87	✓66	✓62	✓14.5	✓14.0	✓87	✓14.5
anchor	✓125	✓125	✓147	✓111	✓26	✓125	✓147	✓83	✓26	✓27.0	✓125	✓26
anchor-size	✓132	✓132	✓147	✓117	✓26	✓132	✓147	✓87	✓26	✓29.0	✓132	✓26
auto	✓87	✓87	✓66	✓73	✓14.1	✓87	✓66	✓62	✓14.5	✓14.0	✓87	✓14.5

✓поддерживается◐с ограниченияминет поддержки?нет данных≤31 — не позднее версии 31

CSS синтаксис:

inset: <top>{1,4};
<top> = auto | <length-percentage> | <anchor()> | <anchor-size()>;

/* Глобальные значения */
inset: initial | inherit | unset | revert | revert-layer;

{1,4} означает от одного до четырёх значений. | разделяет варианты, <length-percentage> — длина или процент. <anchor()> и <anchor-size()> — функции якорного позиционирования с отдельной поддержкой.

JavaScript синтаксис:

element.style.inset = "0";

Начальное значение свойства

• top — auto.
• right — auto.
• bottom — auto.
• left — auto.

Значения свойства

Порядок сторон

Одно значение применяется ко всем сторонам. Два — к верху и низу, затем к правой и левой сторонам. Три — верх, боковые стороны, низ. Четыре — верх, право, низ, лево. Например, inset: 10px 20px 30px задаёт боковые смещения по 20px.

Свойство не действует при position: static. Для absolute смещения относятся к содержащему блоку; часто его создаёт родитель с position: relative. При relative элемент сохраняет исходное место в потоке. Это физическое сокращение: direction: rtl не меняет порядок сторон. Для логических осей существуют inset-block и inset-inline.

Растягивание через противоположные смещения работает при автоматическом размере. Если одновременно задать фиксированную ширину и обе боковые стороны, браузер разрешит избыточные ограничения по правилам позиционирования, а не растянет блок вопреки ширине.

Спецификация

CSS Positioned Layout — inset.

Наследуется

Нет.

Анимируемое

Как составляющие top, right, bottom, left: совместимые длины и проценты интерполируются плавно; участие auto обычно приводит к дискретному переключению.

Примеры, попробуйте сами

Слой внутри карточки

Измените inset: 12px на 0, затем на 12px 30px. Слой растягивается между четырьмя смещениями относительно карточки. Уберите position: relative у родителя и сравните содержащий блок.

base.css

CSS

body {
    margin: 1rem;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #243342;
    background: #fff;
}
* {
    box-sizing: border-box;
}
.card {
    background: #e2e8f0;
    border: 2px dashed #475569;
}
.layer {
    display: grid;
    place-items: center;
    background: #dbeafe;
    border: 2px solid #2563eb;
}

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Слой внутри карточки</title>
  </head>
  <body>
    <div class="card"><div class="layer">Внутренний слой</div></div>
  </body>
</html>

style.css

CSS

.card {
    position: relative;
    height: 180px;
}
.layer {
    position: absolute;
    inset: 12px;
}