inset
Установить расстояние до родительского элемента от расположенного элемента <div>:
div {
inset: 35px;
}
Попробуйте сами »
Определение inset
CSS свойство inset
задает расстояние между элементом и родительским элементом.
Примечание: Чтобы это свойство вступило в силу, у него должно быть задано CSS свойство position
.
CSS свойство inset
- это сокращенное значение для следующих свойств:
Значения CSS свойства inset
может быть задано различными способами:
Если свойство inset имеет четыре значения:
- inset: 15px 30px 60px 90px;
- top расстояние равно 15px
- right расстояние равно 30px
- bottom расстояние равно 60px
- left расстояние равно 90px
Если свойство inset имеет три значения:
- inset: 15px 30px 60px;
- top расстояние равно 15px
- left и right расстояние равны 30px
- bottom расстояние равно 60px
Если свойство inset имеет два значения:
- inset: 15px 30px;
- top и bottom расстояние равны 15px
- left и right расстояние равны 30px
Если свойство inset имеет одно значения:
- inset: 10px;
- все четыре расстояния равны 10px
Значение по умолчанию: | auto |
---|---|
Унаследовано: | no |
Анимируемый: | yes. Читайте о animatable Попробуй |
Версия: | CSS3 |
JavaScript синтаксис: | object.style.inset="100px 50px" Попробуй |
Поддержка inset
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
Свойство | |||||
---|---|---|---|---|---|
inset | 87.0 | 87.0 | 66.0 | 14.1 | 73.0 |
Синтаксис inset
inset: auto|value|initial|inherit;
Значения inset
Значение | Описание | Демонстрация |
---|---|---|
auto | По умолчанию. Расстояние вставки элемента по умолчанию. | Демо ❯ |
length | Определяет вставка в px, pt, cm и т.д. Допускаются отрицательные значения. Читайте о единицы измерения длины | Демо ❯ |
% | Определяет расстояние в процентах относительно размера родительского элемента на соответствующей оси. | Демо ❯ |
initial | Устанавливает для этого свойства значение по умолчанию. Читайте о initial | |
inherit | Наследует это свойство от своего родительского элемента. Читайте о inherit |
Примеры inset
Установить значение свойства inset элемента <div> равно расстоянию 15 пикселей от родительского элемента сверху и снизу и 30 пикселям слева и справа:
div {
inset: 15px 30px;
}
Попробуйте сами »
Установить значение свойства inset элемента <div> равно расстоянию 15 пикселей до родительского элемента сверху, 30 пикселей слева и справа и 60 пикселей снизу:
div {
inset: 15px 30px 60px;
}
Попробуйте сами »
Установить значение свойства inset элемента <div> равно расстоянию 15 пикселей сверху, 30 пикселей справа, 60 пикселей снизу и 90 пикселей слева:
div {
inset: 15px 30px 60px 90px;
}
Попробуйте сами »
Страницы по теме inset
CSS Учебник: CSS Позиция
CSS position свойство: CSS Класс позиции
CSS bottom свойство: CSS Позиция снизу
CSS left свойство: CSS Позиция слева
CSS right свойство: CSS Позиция справа
CSS top свойство: CSS Позиция сверху