شرح CSS Box Model وفهم المحتوى والهوامش والحشوات والحدود

شرح CSS Box Model بالتفصيل: المحتوى، padding، border، margin

نموذج الصندوق (Box Model) في CSS هو أساس فهم كيفية عرض العناصر داخل صفحة ويب. كل عنصر HTML يتعامل كصندوق يتكوّن من أربع طبقات متداخلة تبدأ من الداخل: محتوى (content) — padding — border — margin. في المقال ده، هنتعرف على كل جزئية بالتفصيل مع الأمثلة العملية وطرق حساب الحجم الفعلي للعناصر، وهنشوف ليه استخدام box-sizing: border-box بيخلي التصميم أسهل وأنسب.

1. ما هو CSS Box Model؟

في CSS، كل عنصر HTML بيتخيل على هيئة "صندوق" يتكوّن من 4 أجزاء:

المحتوى (Content): المنطقة الداخلية اللي بيظهر فيها النص أو الصور.
الحشوة (Padding): مساحة بيضاء شفافة حوالي المحتوى.
الإطار (Border): خط محيط بالحشوة والمحتوى.
الهامش (Margin): مساحة خارجية شفافة تفصل العنصر عن العناصر التانية.

الصندوق بيبدأ من المحتوى على البرة لحد الهامش.

2. النموذج الافتراضي: content-box

بافتراض إن القيمة الافتراضية للـ box-sizing هي content-box، معنى كده إن الخصائص width و height بتتحكم في حجم المحتوى فقط، والباقي بيتضاف عليه. مثال:

.my-box {
  width: 320px;
  height: 50px;
  padding: 10px;
  border: 5px solid gray;
}

الحساب هيكون:

العرض الكلّي = 320 + (10px × 2) + (5px × 2) = 350px
الارتفاع الكلّي = 50 + (10px × 2) + (5px × 2) = 80px

3. النموذج البديل: border-box

عند استخدام:

.my-box {
  box-sizing: border-box;
}

الـ padding و border يدخلوا ضمن المعايير اللي كتبتها في width و height فعليًا، وبالتالي الحجم الكلي المسجّل هو نفس القيمة المعينة. ده بيسهّل التصميم خصوصًا في التخطيطات المعقدة.

4. لماذا نستخدم `box-sizing: border-box;`؟

يبسّط الحسابات: مش محتاج تجمع padding أو border.
موثوق بشكل أفضل في تصاميم responsive.
بيقلّل الاختلافات بين المتصفحات.

ومعظم CSS resets أو frameworks (زي Bootstrap) بيطبقوا هذا الأسلوب عالميًا للعناصر.

5. مثال متكامل يوضح الفرق

.content-box {
  width: 300px;
  height: 100px;
  padding: 20px;
  border: 10px solid black;
  /* الحجم الفعلي: 300 + 40 + 20 = 360px × 100 + 40 + 20 = 160px */
}

.border-box {
  box-sizing: border-box;
  width: 300px;
  height: 100px;
  padding: 20px;
  border: 10px solid black;
  /* الحجم الكلي ما يغيرش عن 300 × 100 */
}

6. مقارنة بين النموذجين

النموذج	الوصف	الحجم الكلي (عرض×ارتفاع)
content-box	padding وborder خارج العرض/الارتفاع	360px × 160px
border-box	padding وborder داخل العرض/الارتفاع	300px × 100px

7. خلاصة

نموذج الصندوق في CSS هو الركيزة الأساسية لفهم تخطيط العناصر. القيمة الافتراضية content-box يمكن أن تؤدي لحسابات معقدة، أما border-box فبتضبط القياسات داخل البُعد المكتوب أساسًا. النصيحة الأقوى: استخدم global rule يتضمن:

*, *::before, *::after {
  box-sizing: border-box;
}

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