خصائص inset CSS

التعريف والاستخدام

inset الميزة تستخدم لضبط المسافة بين العنصر والشخص الأم.

注意:要使该属性生效,必须指定 ملاحظة:} للإجراء الخاصية هذه فعالة، يجب تحديد

inset الوضع

inset اليسار

اليمين

inset: 15px 30px 60px 90px;
  • المسافة اليسرى هي 90 بكسل
  • القيم يمكن تعيينها بطرق مختلفة:
  • إذا كان inset الخاصية لديها ثلاثة قيم:
  • إذا كان inset الخاصية لديها أربع قيم:

المسافة اليمنى هي 30 بكسل

inset: 15px 30px 60px;
  • المسافة اليسرى هي 90 بكسل
  • إذا كان inset الخاصية لديها قيمتين:
  • إذا كان inset الخاصية لديها ثلاثة قيم:

المسافة العلوية هي 15 بكسل

مثال 2
  • المسافة السفلية هي 60 بكسل
  • إذا كان inset الخاصية لديها قيمتين:

المسافة العلوية والسفلية هي 15 بكسل

المسافة اليمنى واليسرى هي 30 بكسل
  • إذا كان inset الخاصية لديها قيمة واحدة:

inset: 10px;

المسافات في الأربعة اتجاهات هي 10 بكسل

مثال

div {
  مثال 1
}

تجربة شخصية

ضبط مسافة العنصر <div> الموجود في الموقع مع العنصر الأب:

ضبط الخاصية inset لـ <div> عنصر: inset inset: 35px;

div {
  مثال 2
}

تجربة شخصية

inset: 15px 30px;

ضبط الخاصية inset لـ <div> عنصر: inset مثال 3

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

تجربة شخصية

مثال 4

ضبط الخاصية inset لـ <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 ينتقل إلى هذا الخاصية من عنصر الأب. انظر inherit.

تفاصيل التقنية

القيمة الافتراضية: auto
الوراثة: لا
تحريك إنتاج: يدعم. انظر:خصائص تحريك.
الإصدار: CSS3
جافا سكربت نحوية: object.style.inset="100px 50px"

دعم المتصفح

الرقم في الجدول يمثل إصدار المستعرض الذي يدعم الخاصية بشكل كامل.

الكلور ال边缘 الفاكس السفاري الأوبرا
87.0 87.0 66.0 14.1 73.0

الصفحات ذات الصلة

دروس:توضيح CSS

المرجع:خصائص position CSS

المرجع:خصائص الأسفل

المرجع:خصائص left CSS

المرجع:خصائص right CSS

المرجع:خصائص top CSS