خصائص inset-inline-end CSS

الصفحة السابقة inset-inline
الصفحة التالية inset-inline-start

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

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

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

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

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

مثال

مثال 1

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

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

جرب بنفسك

مثال 2

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

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

جرب بنفسك

مثال 3

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

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

جرب بنفسك

قواعد اللغة CSS

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

قيمة الخاصية

القيمة	الوصف
auto	القيمة الافتراضية. المسافة الداخلية الافتراضية للعنصر.
length	تحديد المسافة باستخدام وحدات مثل px،pt،cm وما إلى ذلك. يسمح بالقيم السلبية. انظر:وحدات CSS.
%	تحديد المسافة النسبية للعنصر بالنسبة إلى حجم العنصر الأم في المحور المحدد.
initial	ضع هذا الخاصية على قيمتها الافتراضية. انظر initial.
inherit	يرث هذا الخاصية من عنصر الأب. انظر inherit.

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

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