CSS — Box Model

مقدمة

تعلّم Box Model في CSS مع شرح واضح ومثال عملي.

ماذا ستتعلم؟

• ما هو Box Model
• متى نستخدمه
• كيف يعمل عملياً
• مثال جاهز للنسخ

الصياغة

margin / padding / border

مثال

.box{
  margin:12px;
  padding:14px;
  border:1px solid #e5e7eb;
  border-radius:12px;
}

ملاحظات

• جرّب المثال في Playground.
• ابدأ بسيطاً ثم طوّر.

أخطاء شائعة

• نسيان الصياغة الصحيحة.
• عدم اختبار النتيجة.

جرّب بنفسك: افتح Playground: /ar/playground/html