Как задать позицию и размер элемента. CSS-свойство inset

CSS-свойство inset задаёт позицию и размер элемента на странице. Это комбинация четырёх отдельных свойств: top, right, bottom и left, которые определяют отступы от верхнего, правого, нижнего и левого края элемента.

Синтаксис

.element {
  inset: 10px 20px 30px 40px;
}

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

В свойстве inset можно указать одно, два, три или четыре значения.

Если задать только одно значение для свойства inset, оно применится ко всем сторонам элемента одновременно.

.element {
  inset: 10px; /* Установит отступы всех сторон элемента на 10 пикселей */
}

Если задать два значения для inset, то они применятся к вертикальным и горизонтальным сторонам элемента.

.element {
  inset: 10px 20px; /* Установит верхний и нижний отступы на 10 пикселей, правый и левый — на 20 пикселей */
}

Если задать три значения для inset, они применятся к верхней, правой и левой сторонам, а отступы для нижней стороны будут равны отступу верхней стороны.

.element {
  inset: 10px 20px 30px; /* Установит верхний отступ на 10 пикселей, правый и левый — на 20 пикселей, нижний отступ на 30 пикселей */
}

Если задать четыре значения для inset, они применятся к верхней, правой, нижней и левой сторонам элемента.

.element {
  inset: 10px 20px 30px 40px; /* Установит верхний отступ на 10 пикселей, правый на 20 пикселей, нижний на 30 пикселей, левый на 40 пикселей */
}

Нюансы использования

Значение inset применяется только к элементам, у которых задано позиционирование, например, position: absolute, position: relative или position: fixed. Для элементов с position: static (значение по умолчанию) свойство не будет иметь эффекта.

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

Потренируйте использовать inset — попробуйте поменять значения и посмотрите, как будет вести себя элемент.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.