Установить расстояние до родительского элемента от расположенного элемента <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 Позиция сверху