inset

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

Свойство CSS inset определяет логический блок и встроенные начальное и конечное смещения элемента, которые отображают физическое смещение, зависящее от способа записи, направления и ориентации текста. Оно соответствует свойствам  top и bottom, или right и left, в зависимости от значений, определенных для writing-mode, direction, и text-orientation.

/* <length> значения */
inset: 3px 10px 3px 10px;
inset: 2.4em 3em 3em 3em;
inset: 10px; /* значение применяется ко всем сторонам */

/* <percentage> от ширины или высоты внешнего блока */
inset: 10% 5% 5% 5%;

/* Ключевое значение */
inset: auto;

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

Начальное значениеauto
Применяется кпозиционированные элементы
Наследуетсянет
Процентылогическая высота контейнера
Отображениевизуальный
Обработка значениятакже как смещение блоков свойствами: top, right, bottom, left, кроме того направления логичны
Animation typeдлина, проценты или calc();
Канонический порядокуникальный неоднозначный порядок, определённый формальной грамматикой

Синтаксис

Значения

Свойство inset принимает значения, аналогичные значениям свойства left.

Формальный синтаксис

<'top'>{1,4}

Пример

HTML-содержимое

<div>
  <p class="exampleText">Example text</p>
</div>

CSS-содержимое

div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  position: relative;
  inset: 20px 50px 30px 10px;
  background-color: #c8c800;
}

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

Спецификация Статус Комментарий
CSS Logical Properties and Values Level 1
Определение 'inset' в этой спецификации.
Редакторский черновик Первое определение

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
insetChrome Нет поддержки НетEdge Нет поддержки НетFirefox Полная поддержка 66IE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетFirefox Android Полная поддержка 66Opera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки

Смотрите также