Hausa CSS inset-inline attibutu

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

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 ال أعلى،الأسفل،اليسار و اليمين مثلها تمامًا، لكن 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;

قيمة الخاصية

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

دعم المتصفح

الرقم في الجدول يعني إصدار المتصفح الذي يدعم هذه الخاصية تمامًا.

الصفحات المطلوبة

Tuturu:Tasiri CSS

Manazarta:属性 na CSS position

Manazarta:CSS direction 属性

Manazarta:属性 writing-mode CSS