الفصل 9: الصناديق والنماذج (Box Model)

يعني إيه Box Model؟ وإزاي بيتحسب حجم أي عنصر؟

---

🎯 الأول… يعني إيه Box Model؟

في CSS، أي عنصر في الصفحة بيُتعامل معاه كأنه صندوق، والصندوق ده بيتكوّن من 4 طبقات فوق بعض كده:

luaCopy code+---------------------------+   ← border
|     المسافة الداخلية     |   ← padding
|      (padding)           |
|   +-------------------+  |
|   |     المحتوى       |  |   ← content
|   +-------------------+  |
+---------------------------+
       ↑       ↓
    margin = المسافة الخارجية

---

🧱 مكونات الـ Box Model:

---

1️⃣ content

ده هو الكلام أو الصورة أو الزر نفسه.
مثلاً، في زر مكتوب عليه “اشتري الآن”، الكلام ده هو الـ content.

---

2️⃣ padding

دي المسافة بين المحتوى وحدود العنصر من جوه.
يعني بتبعد الكلام عن حواف الصندوق من جواه.

cssCopy codebutton {
  padding: 10px;
}

كل ما تزود الـ padding، الكلام بيبعد عن الحواف أكتر.

---

3️⃣ border

الإطار اللي حوالين العنصر.
بتقدر تتحكم في سمكه، لونه، وشكله.

cssCopy codebutton {
  border: 2px solid black;
}

---

4️⃣ margin

دي المسافة بين العنصر والعناصر اللي حواليه.
يعني بتفصل العنصر عن اللي فوقه أو تحته أو جنبه.

cssCopy codebutton {
  margin: 20px;
}

---

📏 طيب إزاي بيتحسب الحجم الكلي للعنصر؟

الحجم الفعلي لأي عنصر بيكون:

arduinoCopy codeالعرض الكلي = width + padding + border + margin  
الارتفاع الكلي = height + padding + border + margin

يعني لو كتبت كده:

cssCopy code.box {
  width: 200px;
  padding: 10px;
  border: 5px solid #000;
  margin: 20px;
}

يبقى الحجم النهائي للعنصر:

• العرض الكلي: 200 + 10 + 10 + 5 + 5 = 230px
• الارتفاع الكلي: نفس الفكرة

---

💡 خد بالك من دي:

خاصية box-sizing

دي بتحدد طريقة حساب الحجم.

cssCopy codebox-sizing: content-box; /* (الافتراضية) */

🔸 مع content-box:
الـ width بيشمل المحتوى فقط
والـ padding والـ border بيتضافوا عليه

---

لكن لو استخدمت:

cssCopy codebox-sizing: border-box;

📦 ساعتها:

• كل حاجة (المحتوى + padding + border) جوه الـ width والـ height اللي إنت كتبته.
• يعني لو قلت width: 200px، هيشمل كل حاجة.

✅ وده أنسب اختيار في أغلب الشغل الحديث، عشان يخلي الحسابات أوضح.

---

✨ مثال عملي:

cssCopy code.box {
  width: 300px;
  padding: 20px;
  border: 5px solid blue;
  margin: 30px;
  box-sizing: border-box;
}

🎯 في المثال ده، الصندوق هيظهر عرضه 300px بالظبط، وكل حاجة جواه متظبطة جوه المساحة دي.

---

🔍 إزاي أشوف Box Model في المتصفح؟

لو فتحت Chrome أو أي متصفح حديث:

• دوس كليك يمين على أي عنصر → Inspect
• في التبويب “Computed” هتلاقي رسمة كده توضح الـ Box Model
  وهتشوف كل طبقة من: content – padding – border – margin

---

✅ نصايح من الآخر:

• دايمًا استخدم box-sizing: border-box; في أول المشروع:

cssCopy code* {
  box-sizing: border-box;
}

• افهم الفرق بين padding و margin كويس جدًا، عشان تظبط التصميم