خصائص inset-block-end CSS

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

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

ملاحظة:للحصول على تأثير الخاصية، يجب تحديد position الخصائص

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

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

مثال

مثال 1

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

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

جرب بنفسك

مثال 2

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

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

جرب بنفسك

جملة CSS

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

قيمة الخاصية

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

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

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

دعم المتصفح

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

الخروم الكنج الفاكس السفاري الопера
87.0 87.0 63.0 14.1 73.0

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

دروس:توضيح CSS

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

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