شرح Box Model في CSS — كيف يُحسب حجم العنصر الحقيقي؟

Box Model هو أهم مفهوم في CSS. إذا فهمته جيداً، ستفهم لماذا العناصر تتباعد، ولماذا أحياناً الحجم يظهر أكبر من المتوقع.

إذا كنت تبحث عن ما هو Box Model في CSS أو الفرق بين padding و margin أو كيف أحسب حجم العنصر في CSS، فهذا الدرس هو الأساس الذي تحتاجه.

ما هو Box Model في CSS؟

المتصفح يتعامل مع كل عنصر HTML على أنه صندوق مكوّن من 4 طبقات:

1. Content: المحتوى (نص/صورة).
2. Padding: مسافة داخلية حول المحتوى.
3. Border: حدود تحيط بالـ padding.
4. Margin: مسافة خارجية تفصل الصندوق عن غيره.

التعريف البسيط: Box Model في CSS هو طريقة حساب أبعاد ومسافات كل عنصر عبر Content + Padding + Border + Margin.

شرح الطبقات الأربع في Box Model

1) Content في CSS

هو الجزء الذي يظهر فيه النص أو الصورة. عند كتابة width وheight فأنت تتحكم افتراضياً في المحتوى فقط.

2) Padding في CSS

مساحة داخلية تضيف فراغاً حول المحتوى من الداخل. تزيد من الحجم الظاهر للصندوق إذا كنت على box-sizing: content-box.

3) Border في CSS

الإطار حول العنصر. له سماكة ولون ونمط (solid, dashed...).

4) Margin في CSS

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

مثال عملي: كيف يُحسب الحجم الكلي للعنصر؟

.box {
    width: 200px;
    padding: 20px;
    border: 5px solid #0ea5e9;
    margin: 10px;
}

ماذا يفعل هذا الكود؟ ينشئ صندوقاً بعرض محتوى 200px مع padding وحدود ومسافة خارجية.

سطر بسطر:

• width: 200px: عرض المحتوى فقط.
• padding: 20px: 20 يمين + 20 يسار.
• border: 5px: 5 يمين + 5 يسار.
• margin: 10px: 10 يمين + 10 يسار (مسافة خارجية).

الحساب الصحيح (أفقياً):

200 + 40 + 10 + 20 = 270px

النتيجة المتوقعة: العنصر سيشغل مساحة أفقية كلية 270px، وليس 200px.

خطأ شائع: الاعتقاد أن width هو الحجم النهائي دائماً.

box-sizing في CSS (نقطة مهمة جداً)

افتراضياً، CSS تستخدم content-box، أي إن width لا يشمل padding/border. لكن في أغلب المشاريع الحديثة نستخدم border-box لتسهيل الحساب.

* {
    box-sizing: border-box;
}

ماذا يفعل هذا الكود؟ يجعل width/height تشمل المحتوى + padding + border.

النتيجة المتوقعة: حسابات layout أسهل بكثير.

خطأ شائع: نسيان border-box ثم استغراب كسر الأعمدة في التخطيط.

الفرق بين Padding و Margin في CSS

الخاصية	المكان	تؤثر على الخلفية؟	الاستخدام الشائع
padding	داخل العنصر	نعم (ضمن الخلفية)	زيادة فراغ داخل الصندوق
margin	خارج العنصر	لا	إبعاد العناصر عن بعضها

أخطاء شائعة في Box Model في CSS

١) تجاهل padding/border عند حساب العرض: يسبب كسر التصميم.

٢) خلط دور padding وmargin: ينتج عنه مسافات غير منطقية.

٣) عدم استخدام border-box في مشروع كبير: يزيد تعقيد التخطيط.

الأسئلة الشائعة — FAQ (أسئلة بحثية شائعة)

ما هو Box Model في CSS؟

هو نموذج يشرح أن كل عنصر يتكون من content وpadding وborder وmargin.

ما الفرق بين padding و margin في CSS؟

padding داخلي داخل العنصر، margin خارجي بين العناصر.

كيف أحسب الحجم الحقيقي للعنصر في CSS؟

اجمع: عرض المحتوى + padding يمين/يسار + border يمين/يسار + margin يمين/يسار.

ما فائدة box-sizing: border-box في CSS؟

يجعل الحساب أسهل لأن العرض يشمل padding وborder.

لماذا div عرضه 100% ويتجاوز الحاوية في CSS؟

غالباً بسبب padding أو border إضافية مع content-box. الحل غالباً: box-sizing: border-box.