نموذج الصندوق CSS

نموذج الصندوق هو أساس تخطيط CSS. في عالم CSS، كل عنصر HTML يُعامل كـ "صندوق" مستطيل يتكون من منطقة المحتوى والحشو والحدود والهامش.

مرجع سريع لخصائص نموذج الصندوق

أجزاء نموذج الصندوق الأربعة

من الداخل إلى الخارج:

┌─────────────────────────────────────┐  ← هامش
│  ┌───────────────────────────────┐  │  ← حدود
│  │  ┌─────────────────────────┐  │  │  ← حشو
│  │  │                         │  │  │
│  │  │     منطقة المحتوى       │  │  │
│  │  │                         │  │  │
│  │  └─────────────────────────┘  │  │
│  └───────────────────────────────┘  │
└─────────────────────────────────────┘

1. منطقة المحتوى

المنطقة التي يوجد فيها المحتوى الفعلي، مثل النصوص والصور. العرض والارتفاع يُتحكّم بهما بخاصيتي width وheight.

2. الحشو

المسافة بين منطقة المحتوى والحدود، تُستخدم لإنشاء مسافة بيضاء بين المحتوى والحدود.

مثال

<style>
.box {
  padding: 20px;  /* 20px من جميع الجوانب */
  background: #fce4ec;
  border: 2px solid #e91e63;
}
</style>
<div class="box">هذا العنصر يحتوي على حشو يُنشئ 20px من المسافة بين المحتوى والحدود</div>

3. الحدود

خط الحدود الذي يلف حول الحشو ومنطقة المحتوى.

مثال

<style>
.box {
  border: 2px solid #333;
  padding: 16px;
  background: #f9f9f9;
}
</style>
<div class="box">هذا العنصر يحتوي على حدود تلف حول الحشو من الخارج</div>

4. الهامش

المسافة بين الحدود والعناصر الأخرى، تُستخدم للتحكم في المسافة بين العناصر.

مثال

<style>
.box {
  margin: 10px;  /* 10px من جميع الجوانب */
  background: #e8f5e9;
  border: 1px solid #66bb6a;
  padding: 10px;
}
</style>
<div class="box">صندوق 1 - لديه هامش 10px</div>
<div class="box">صندوق 2 - مسافة 20px من صندوق 1</div>
<div class="box">صندوق 3 - مسافة 20px من صندوق 2</div>

الحجم الفعلي للعنصر

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

بشكل افتراضي (box-sizing: content-box):

العرض الكلي للعنصر = width + padding-left + padding-right + border-left + border-right
الارتفاع الكلي للعنصر = height + padding-top + padding-bottom + border-top + border-bottom

على سبيل المثال:

مثال

<style>
.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 2px solid black;
  background: #e3f2fd;
  text-align: center;
  line-height: 1.5;
}
</style>
<div class="box">
  منطقة المحتوى 200×100 بكسل<br>
  العرض الفعلي 244×144 بكسل
</div>

الحجم الفعلي لعرض هذا الصندوق هو:

• العرض الكلي = 200 + 20×2 + 2×2 = 244 بكسل
• الارتفاع الكلي = 100 + 20×2 + 2×2 = 144 بكسل

إذا كنت تعتقد أن هذا الصندوق 200×100 فقط، فأنت مخطئ! كثير من المبتدئين يتعثرون هنا.

خاصية box-sizing

لحل مشكلة "الحجم الفعلي أكبر من المُعيَّن"، قدّم CSS3 خاصية box-sizing.

content-box (افتراضي)

width وheight تشملان منطقة المحتوى فقط؛ الحشو والحدود لا تُدرجان. هذا هو الافتراضي وמקור "الفخ".

border-box

width وheight تشملان المحتوى + الحشو + الحدود؛ الحدود والحشو لن "يُوسّعا" العنصر:

مثال: مقارنة content-box و border-box

<style>
.container {
  display: flex;
  justify-content: space-around;
}
.box {
  width: 300px;
  height: 200px;
  border: 10px solid indianred;
}
.item {
  width: 100%;
  background: rgba(49, 115, 187, 0.3);
  border: solid #5B6DCD 10px;
  padding: 15px;
}
.s1 { box-sizing: content-box; }
.s2 { box-sizing: border-box; }
</style>
<div class="container">
  <div class="box">
    <h3>content-box (افتراضي)</h3>
    <div class="item s1">width: 100% + padding + border = يفيض عن الأصل</div>
  </div>
  <div class="box">
    <h3>border-box</h3>
    <div class="item s2">width: 100% يشمل padding + border = يناسب تماماً</div>
  </div>
</div>

إعداد border-box العالمي

كثير من المشاريع تُعيّن هذا عالمياً في إعادة التعيين:

مثال

<style>
*, *::before, *::after {
  box-sizing: border-box;
}
</style>
<div class="box-demo">صندوق عرض</div>

تصحيح نموذج الصندوق

استخدم أدوات المطور في المتصفح لفحص نموذج الصندوق بصرياً:

1. انقر بزر الماوس الأيمن على عنصر في الصفحة، واختر "فحص"
2. حدد العنصر في لوحة العناصر
3. انتقل إلى لوحة مُحسوبة أو تخطيط
4. سترى مخطط نموذج الصندوق يُظهر قيم المحتوى والحشو والحدود والهامش

اختلافات نموذج الصندوق بين أنواع العناصر

• عناصر المستوى القطري: العرض الافتراضي 100% من الحاوية الأبوية؛ الارتفاع يُحدده المحتوى
• عناصر سطرية: لا تقبل العرض والارتفاع؛ الحشو/الهامش يعمل فقط أفقياً
• عناصر سطرية-قطعية: يمكن تعيين العرض/الارتفاع، لكن لا تشغّل سطراً كاملاً

❓ أسئلة شائعة

📖 ملخص

• نموذج الصندوق هو مفهوم CSS الأكثر أساسية وأهمية
• فهم البنية ذات الطبقات الأربع للمحتوى والحشو والحدود والهامش — وكيفية تأثير box-sizing على حسابات الأبعاد — هو شرط مسبق لكتابة تخطيطات موثوقة
• تعيين box-sizing: border-box كافتراضي عالمي في بداية المشروع يوفر الكثير من المشاكل مع حسابات الأبعاد

📝 تمارين

أساسي

1. أنشئ صندوق 200×200 بحشو 30px وحدود 5px solid. استخدم أدوات المطور في المتصفح للتحقق من الأبعاد الفعلية للعرض والتحقق من صيغة نموذج الصندوق.
2. انسخ الصندوق أعلاه، أضف box-sizing: border-box، وراقب تغييرات الحجم الفعلي، وقارن مع التمرين السابق.

متوسط

3. أنشئ صفحة بصندوقين جنباً إلى جنب، اضبط هوامشهما، وراقب ظاهرة "تداخل الهامش" (الهوامش العلوية/Sفلية لعناصر المستوى القطري تأخذ الأكبر بدلاً من الجمع).
4. استخدم border-box لإنشاء "تخطيط عمودين بعرض 50% لكل منهما ومسافة 20px بينهما".

تحدٍ

5. أنشئ مكوّن بطاقة بـ:
   • عرض ثابت 300px
   • حشو 20px
   • حدود 1px solid #ddd
   • حدود نصف قطرها 8px
   • استخدم border-box لضمان أن العرض الكلي دائماً 300px
6. أنشئ تخطيط نموذج باستخدام حسابات نموذج الصندوق لمحاذاة حقول الإدخال والأزرار بشكل مثالي.