inset
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2021.
Свойство CSS inset
определяет логический блок и встроенные начальное и конечное смещения элемента, которые отображают физическое смещение, зависящее от способа записи, направления и ориентации текста. Оно соответствует свойствам top
и bottom
, или right
и left
, в зависимости от значений, определённых для writing-mode
, direction
, и text-orientation
.
/* Ключевые слова */
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;
Начальное значение | как и у каждого из подсвойств этого свойства: |
---|---|
Применяется к | позиционированные элементы |
Наследуется | нет |
Проценты | относительно размера содержащего блока на соответствующей оси (например, ширина слева или справа, высота сверху и снизу) |
Обработка значения | как и у каждого из подсвойств этого свойства:
|
Animation type | длина, проценты или calc(); |
Синтаксис
Значения
Свойство inset
принимает значения, аналогичные значениям свойства left
.
Формальный синтаксис
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-содержимое
<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;
}
Спецификации
Specification |
---|
CSS Logical Properties and Values Level 1 # propdef-inset |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
- Сопоставление физических свойств:
top
,right
,bottom
, andleft
writing-mode
,direction
,text-orientation