خصائص inset-inline CSS

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

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

ملاحظة:للإشارة إلى أن الخاصية تعمل، يجب تحديد position الخاصية.

inset-inline الخاصية هي اختصار للخصائص التالية:

• inset-inline-start
• inset-inline-end

inset-inline يمكن تعيين قيمة الخاصية بطرق مختلفة:

إذا كان لـ inset-inline خاصيتين:

inset-inline: 10px 50px;

• تباعد البداية هو 10px
• تباعد النهاية هو 50px

إذا كانت الخاصية inset-inline تحتوي على قيمة واحدة:

inset-inline: 10px;

• المسافة من البداية إلى النهاية للعنصر هي 10px

CSS inset-inline و inset-block خصائص تتعامل مع CSS top،bottom،left و right مثلها تمامًا، لكن inset-block و inset-inline يعتمد الخصائص على اتجاه الصفحة واتجاه السطر.

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

مثال

مثال 1

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

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

تجربة شخصية

مثال 2

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

div {
  inset-inline: 15px 30px;
  writing-mode: vertical-rl;
}

تجربة شخصية

مثال 3

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

div {
  inset-inline: 15px 30px;
  direction: rtl;
}

تجربة شخصية

نحو CSS

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

قيمة الخاصية

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

دعم المتصفح

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

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

دروس:توضيح CSS

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

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

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