خصائص inset-block CSS

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

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

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

inset-block الخاصية هي اختصار للعناصر التالية:

• inset-block-start
• inset-block-end

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

إذا كانت الخاصية inset-block لديها قيمتان:

inset-block: 10px 50px;

• المسافة البداية هي 10px
• المسافة النهائية هي 50px

إذا كانت الخاصية inset-block لديها قيمة واحدة:

inset-block: 10px;

• المسافة البداية والنهاية هي 10px

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

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

مثال

مثال 1

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

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

جرب بنفسك

مثال 2

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

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

جرب بنفسك

جملة CSS

inset-block: تلقائي|طول|مبدئي|تنقل;

قيمة الخاصية

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

دعم المتصفح

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

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

دروس:تثبيت CSS

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

المرجع:خصائص inset-block-end CSS

المرجع:خصائص inset-block-start CSS

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