This page was translated from English by the community. Learn more and join the MDN Web Docs community.

inset

Experimental

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

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

/* <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 (en-US), кроме того направления логичны
Animation typeдлина, проценты или calc();

Синтаксис

Значения

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

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

<'top'>{ (en-US)1,4} (en-US)

Пример

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' в этой спецификации.		 Редакторский черновик Первое определение

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

BCD tables only load in the browser

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