inset

Сокращённое свойство inset используется, чтобы одновременно установить для элемента свойства left, right, top и bottom. Работает только для позиционированных элементов (у них значение свойства position отлично от static).

Краткая информация

Значение по умолчанию auto auto auto auto
Наследуется Нет
Применяется Ко всем позиционированным элементам
Анимируется Да

Синтаксис

inset: [auto | <размер> | <проценты>]{1,4}
Описание Пример
<тип> Указывает тип значения. <размер>
A && B Значения должны выводиться в указанном порядке. <размер> && <цвет>
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [,<время>]*
+ Повторять один или больше раз. <число>+
? Указанный тип, слово или группа не является обязательным. inset?
{A, B} Повторять не менее A, но не более B раз. <радиус>{1,4}
# Повторять один или больше раз через запятую. <время>#

Значения

auto
Устанавливает автоматическое значение, которое обычно соответствует исходному положению элемента.
<размер>
Задаёт смещение в единицах CSS (px, em, rem и др.).
<проценты>
Задаёт смещение в процентах от ширины элемента.

Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества значений и приведён в табл. 1.

Табл. 1. Зависимость от числа значений
Число значений Результат Пример Эквивалент
1 Смещения будут установлены одновременно для каждого края элемента. 
div {
  position: absolute;
  inset: 10px;
}
 
div {
  position: absolute;
  left: 10px; right: 10px;
  top: 10px; bottom: 10px;
}
2 Первое значение устанавливает смещение для верхнего и нижнего краёв, второе — для левого и правого. 
div {
 position: absolute;
 inset: 10px 0;
}
 
div {
 position: absolute;
 top: 10px; bottom: 10px;
 left: 0; right: 0;
}
3 Первое значение задаёт смещение для верхнего края, второе — одновременно для левого и правого краёв, а третье — для нижнего края. 
div {
  position: absolute;
  inset: 0 5px 10px;
}
 
div {
 position: absolute;
 top: 0;
 left: 5px; right: 5px;
 bottom: 10px;
}
4 Поочередно устанавливается смещение верхнего, правого, нижнего и левого краёв. 
div {
 position: absolute;
 inset: 0 5px 10px 15px;
}
 
div {
 position: absolute;
 top: 0; right: 5px;
 bottom: 10px; left: 15px;
}

Пример

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>inset</title> <style> .btn-link { border: 1px solid #e1e1e1; color: #666; /* Цвет текста */ padding: 1em 2em; /* Расстояние от текста до рамки */ margin: 0.5em; /* Пространство вокруг */ display: inline-block; /* Строчно-блочный элемент */ position: relative; /* Относительное позиционирование */ overflow: hidden; /* Прячем всё за пределами кнопки */ cursor: pointer; /* Курсор в виде руки */ } .btn-link::before { content: ''; /* Пустой псевдоэлемент */ position: absolute; /* Абсолютное позиционирование */ background: #2098d1; /* Цвет фона */ inset: 0; /* Соответствует размеру кнопки */ z-index: -1; /* Псевдоэлемент ниже текста кнопки */ transition: 0.3s; /* Время перехода */ transform-origin: 0 50%; /* Анимация идёт от правого края */ transform: scaleX(0); /* Псевдоэлемент не виден */ } .btn-link:hover { color: #fff; /* Цвет текста */ } .btn-link:hover::before { transform: scaleX(1); /* Псевдоэлемент виден */ } </style> </head> <body> <a class="btn-link">Наведи на меня</a> </body> </html>

Объектная модель

Объект.style.inset

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

Браузеры

87 87 73 14.1 66
87 66 62 14.5

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.
Логические