inset

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨апрель 2021 г.⁩.

* Some parts of this feature may have varying levels of support.

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

css

/* Ключевые слова */inset: auto;/* <length> значения */inset: 3px 10px 3px 10px;inset: 2.4em 3em 3em 3em;inset: 10px; /* значение применяется ко всем сторонам *//* <percentage> от ширины или высоты внешнего блока */inset: 10% 5% 5% 5%;/* Глобальные значения */inset: inherit;inset: initial;inset: unset;

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

inset =
<'top'>{1,4}

<top> =
auto|
<length-percentage>|
<anchor()>|
<anchor-size()>

<length-percentage> =
<length>|
<percentage>

<anchor()> =
anchor(<anchor-name>?&&
<anchor-side> ,<length-percentage>?)

<anchor-size()> =
anchor-size([<anchor-name>||<anchor-size>]? ,<length-percentage>?)

<anchor-name> =
<dashed-ident>

<anchor-side> =
inside|
outside|
top|
left|
right|
bottom|
start|
end|
self-start|
self-end|
<percentage>|
center

<anchor-size> =
width|
height|
block|
inline|
self-block|
self-inline

Пример

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

html

<div>  <p>Example text</p></div>

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

css

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