خصائص inset-inline-start CSS

定义和用法

inset-inline-start خصائص لتعيين المسافة بين بداية العنصر في الاتجاه السطر والعنصر الأم.

ملاحظة:لجعل هذا الخصائص يعمل، يجب تحديد position التصميم

CSS inset-inline و inset-block خصائص تتطابق مع العمود،الأسفل،اليسار و اليمين خصائص تشبه بعضها البعض، ولكن inset-block و inset-inline يعتمد الخاصية على اتجاه الكتلة واتجاه السطر.

ملاحظة:خصائص CSS ذات الصلة writing-mode و direction يحدد الاتجاه. يؤثر ذلك على موقع بداية العنصر في الاتجاه السطر، وكذلك inset-inline-start نتيجة الخاصية. للصفحات باللغة الإنجليزية، اتجاه السطر يكون من اليسار إلى اليمين، واتجاه الكتلة يكون نحو الأسفل.

مثال

مثال 1

يحدد المسافة بين بداية العنصر المحدد الموضع بين العنصر الأم في اتجاه السطر:

div {
  inset-inline-start: 50px;
}

جرب بنفسك

مثال 2

عندما يتم تعيين خاصية <div> writing-mode عندما يتم تعيين قيمة الخاصية إلى vertical-rl، فإن اتجاه السطر يكون نحو الأسفل. النتيجة هي أن بداية العنصر تتحرك من اليسار إلى الأعلى:

div {
  inset-inline-start: 50px;
  writing-mode: vertical-rl;
}

جرب بنفسك

مثال 3

عندما يتم تعيين خاصية <div> direction عندما يتم تعيين قيمة الخاصية إلى rtl، فإن اتجاه السطر يكون من اليمين إلى اليسار. يوجد خطأ صغير في الوصف، يجب أن يكون: "النتيجة هو أن بداية العنصر تظل في اليمين (لأن البداية هي اليمين بالنسبة إلى rtl، فقط يتم تقلب المحتوى بالنسبة للترتيب الافتراضي ltr)"

div {
  inset-inline-start: 50px;
  direction: rtl;
}

جرب بنفسك

جملة CSS

inset-inline-start: auto|length|initial|inherit;

قيمة الخاصية

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

دعم المتصفح

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

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

دروس:توضيح CSS

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

المرجع:خصائص الاتجاه CSS direction

المرجع:خصائص writing-mode CSS