نموذج الصندوق: شرح وتمارين وأخطاء شائعة

ماذا يعلّم هذا الدرس فعلًا

تحكم بالتباعد عبر المحتوى والحشو والحد والهامش. هذا الدرس جزء من مسار «أساسيات الويب (Web)».

الشرح المتعمّق

كل عنصر صندوق: محتوى وحشو وحد وهامش. حسابات العرض تفاجئ المبتدئين عندما يضاف الحشو خارج عرض المحتوى. border-box يضم الحشو والحد في العرض المصرح. الهوامش قد تتداخل بين الأشقاء العموديين في التدفق العادي. ارسم مخطط صندوق لـ .card وطابقه مع أدوات المطوّر. ابنِ بطاقة بحشو وهامش؛ بدّل border-box وقارن العروض. استخدم حلقة علّم←اشرح←بيّن←طبّق في كل مرة تدرس فيها هذه المهارة. تنبّأ بالنتيجة قبل التحقق ثم صحّح الخطوة الفاشلة

فقط دون تغيير عشوائي لكل شيء. اقرأ كل خطوة ثم أعد صياغتها بكلماتك قبل التنفيذ. فضّل دورات صغيرة قابلة للتحقق على قفزات كبيرة بلا اختبار. عند ظهور خلل غيّر متغيراً واحداً فقط ثم أعد التحقق من الناتج. احتفظ بملاحظة بسطر واحد لقاعدة القرار حتى يبدأ الجلسة التالية أسرع. أغلق الحلقة باختبار ذاتي قصير يثبت المهارة لا الألفة فقط. اربط الفكرة بموقف واقعي من عملك أو دراستك خلال هذا الأسبوع. تجنّب النسخ الأعمى وركّز على السبب

الذي يجعل الخطوة تعمل. راجع الأخطاء فور حدوثها واكتب سبب الخطأ بجملة واضحة واحدة. اقرأ كل خطوة ثم أعد صياغتها بكلماتك قبل التنفيذ.

تطبيق عملي

**مثال** .card { width: 300px; padding: 16px; border: 1px solid #ccc; box-sizing: border-box; }

أخطاء شائعة

• خلط الحشو بالهامش • تجاهل border-box عند خلط العروض • استخدام الهوامش لتوسيط زائف بلا فهم التداخل