جدول درس

دستورالعمل‌های مرجع CSS

ویژگی‌های CSS

درس‌های اختیاری

پیشنهاد دوره:

جعبه ابزار CodeW3C.com

ویژگی CSS inset

صفحه قبل inline-size
صفحه بعدی inset-block

تعریف و استفاده

inset ویژگی برای تنظیم فاصله بین عناصر و عناصر والد خود استفاده می‌شود.

внимание:чтобы сделать этот атрибут действительным, необходимо указать position атрибут.

inset атрибут является сокращенной формой следующих атрибутов:

top
bottom
left
right

inset значение атрибута можно установить несколькими способами:

если у атрибута inset есть четыре значения:

inset: 15px 30px 60px 90px;

расстояние сверху равно 15px
расстояние справа равно 30px
расстояние снизу равно 60px
расстояние слева равно 90px

если у атрибута inset есть три значения:

inset: 15px 30px 60px;

расстояние сверху равно 15px
расстояние справа и слева равно 30px
расстояние снизу равно 60px

если у атрибута inset есть два значения:

inset: 15px 30px;

расстояние сверху и снизу равно 15px
расстояние справа и слева равно 30px

если у атрибута inset есть один значение:

inset: 10px;

расстояние в четырех направлениях равно 10px

пример

пример 1

установить расстояние от <div> элемента, определенного positioning, до родительского элемента:

div {
  inset: 35px;
}

попробуйте сами

пример 2

установить значение атрибута для <div> элемента inset значение атрибута установлено на 15 пикселей от верха и низа родительского элемента, 30 пикселей от левого и правого краев родительского элемента:

div {
  inset: 15px 30px;
}

попробуйте сами

пример 3

установить значение атрибута для <div> элемента inset значение атрибута установлено на 15 пикселей от верха родительского элемента, 30 пикселей от левого и правого краев родительского элемента, 60 пикселей от низа родительского элемента:

div {
  inset: 15px 30px 60px;
}

попробуйте сами

пример 4

установить значение атрибута для <div> элемента inset значение атрибута установлено на 15 пикселей от верха родительского элемента, 30 пикселей от правого края родительского элемента, 60 пикселей от низа родительского элемента, 90 пикселей от левого края родительского элемента:

div {
  inset: 15px 30px 60px 90px;
}

попробуйте сами

грамматика CSS

inset: auto|length|initial|inherit;

значение атрибута

значение	описание
auto	по умолчанию. Значение по умолчанию для inset расстояния элемента.
length	использовать фиксированные единицы измерения (например, px, pt, cm и т.д.) для указания расстояния. Допускаются отрицательные значения. См. также:واحدهای CSS.
%	использовать проценты для указания расстояния, относительно размера родительского элемента по соответствующей оси.
initial	установить этот атрибут в его значение по умолчанию. См. также initial.
inherit	инherited from its parent element. См. также inherit.

технические детали

по умолчанию:	auto
наследование:	нет
создание анимации:	поддерживается. См. также:атрибуты, связанные с анимацией.
версия:	CSS3
грамматика JavaScript:	object.style.inset="100px 50px"