خاصية inset
آخر تحديث: 2026-09-13
inset خاصية inset
الخاصية inset هي الاختصار لخصائص الإزاحة الأربع top و right و bottom و left، وتضبط إزاحات العنصر المتموضع على جميع الجوانب دفعة واحدة. وقيمتها الافتراضية auto تعني عدم وجود إزاحة. ولا تُطبَّق إلا على العناصر التي تكون قيمة position لها غير static، وصياغتها تشبه margin، إذ تدعم من 1 إلى 4 قيم.
| الفئة | |
|---|---|
| القيمة الأولية | auto |
| موروث | لا |
| ينطبق على | |
| نوع الحركة | |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
inset: auto | <length> | <percentage>;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
auto | كلمة مفتاحية | بلا إزاحة. |
<length> | <percentage> | النوع | اختصار لإزاحات الجوانب الأربعة. |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| inset | ✓ v79 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： يجعل inset:0 عنصرًا متموضعًا بشكل مطلق يغطي العنصر الأصلي بالكامل، ويُستخدم عادةً لطبقات التراكب والتغطية بملء الشاشة.
❓ الأسئلة الشائعة
Qما الفرق بين inset و top/right/bottom/left؟
Ainset هو الاختصار لـ top و right و bottom و left، ويضبط الاتجاهات الأربعة في إعلان واحد لتكون الشفرة أنظف؛ أما الخصائص الأربع الفردية فتوفر تحكمًا دقيقًا في اتجاه واحد في كل مرة، ويمكن خلطها مع inset حيث تتخطى القيم الفردية. وكلتاهما تضبطان في النهاية نفس الإزاحات على عنصر متموضع بنفس أنواع القيم، لذا هما قابلتان للتبادل.
Qكم عدد القيم التي يقبلها inset؟
Aمن واحدة إلى أربع، وفقًا لنفس قواعد margin: القيمة الواحدة تضبط الجوانب الأربعة، مثل inset:10px؛ واثنتان تضبط الأعلى والأسفل واليسار واليمين، مثل inset:10px 20px؛ وثلاث تضبط الأعلى واليسار واليمين والأسفل؛ وأربع تضبط الأعلى واليمين والأسفل واليسار باتجاه عقارب الساعة. ويمكن خلط auto والأطوال والنسب المئوية بحرية، لذا يضبط inset:0 10px 20px 30px كل جانب بشكل مستقل في إعلان واحد.
Qماذا يفعل inset:0؟
Aيضبط inset:0 كلًا من top و right و bottom و left على 0. وبالنسبة لعنصر مطلق داخل عنصر أصلي نسبي، يتمدد ليملأ العنصر الأصلي بالكامل، ويُستخدم عادةً لطبقات التراكب، وتغطيات ملء الشاشة، وأقنعة التحميل بخلفية شبه شفافة. وإذا ضبطت width و height أيضًا، فهو يعادل وضع العنصر في الزاوية العلوية اليسرى للعنصر الأصلي.
Qما مدى دعم المتصفحات لـ inset؟
Ainset خاصية منطقية حديثة مدعومة في Chrome 87+ و Edge 87+ و Firefox 66+ و Safari 14.1+، لذا يمكن لكل المتصفحات الرئيسية استخدامها. وللمتصفحات القديمة جدًا، تراجع إلى الخصائص الأربع الفردية top و right و bottom و left. أما المتغيرات المنطقية inset-block و inset-inline فصدرت بعد ذلك بقليل، لذا احتفظ بهذا التمييز في ذهنك عند استخدامها، واختبر دائمًا السلوك الفيزيائي مقابل المنطقي في المتصفحات المستهدفة.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
