inset

اختصار الإزاحة inset

inset اختصار واحد لـ top وright وbottom وleft معًا — يعمل فقط مع العناصر المُموضَعة (absolute/fixed/sticky/relative).

بدل كتابة أربعة أسطر منفصلة (top: 0; right: 0; bottom: 0; left: 0;) لتمديد عنصر absolute ليملأ أباه بالكامل، inset: 0; تفعل ذلك بسطر واحد — تمامًا كما يجمع margin أربع خصائص في اختصار واحد. يتبع نفس ترتيب القيم المتعددة: قيمة واحدة للكل، قيمتان (رأسي أفقي)، أو أربع (أعلى يمين أسفل يسار).

ملاحظة مهمة: inset فيزيائي الاتجاه دائمًا (top/right/bottom/left الفعلية)، بعكس بعض الخصائص المنطقية الأخرى. للتخطيطات التي تحترم اتجاه الكتابة (RTL/LTR) تلقائيًا، استخدم البديل المنطقي inset-inline وinset-block بدلًا منه.

الصياغة

.overlay {
  position: absolute;
  inset: 0;              /* top/right/bottom/left = 0 معًا */
}

.badge { position: absolute; inset: 8px auto auto 8px; }

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

🎨 محرّر HTML/CSS

<style>
  .frame { position: relative; height: 100px; background: #f1f5f9; border-radius: 8px; }
  .overlay { position: absolute; inset: 10px; background: rgb(124 92 255 / 0.85); border-radius: 6px; display: flex; align-items: center; justify-content: center; color: white; }
</style>
<div class="frame"><div class="overlay">inset: 10px من كل الجهات</div></div>

النتيجة المباشرة:

أهم القيم

القيمة	الوظيفة
inset: 0	يمدّد العنصر المُموضَع ليملأ أباه المرجعي بالكامل
قيمتان/أربع قيم	نفس منطق margin: رأسي أفقي، أو أعلى يمين أسفل يسار
الشرط	لا أثر بلا position: absolute/fixed/relative/sticky

💡 نصائح عملية

inset: 0 هي الطريقة الأسرع لتغطية عنصر لأبيه المرجعي (overlay، طبقة تحميل)
في مشروع عربي RTL، فضّل inset-inline/inset-block إن أردت انعكاسًا تلقائيًا مع الاتجاه

⚠️ أخطاء شائعة

استخدامها بلا position → لا يحدث أي تأثير إطلاقًا
توقّع سلوك منطقي (RTL-aware) منها — inset فيزيائي دائمًا وليس منطقيًا

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار CSS الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs