| الطبقة أو المفهوم | طريقة العمل والوظيفة البرمجية | التأثير على الحساب والأبعاد |
|---|---|---|
| Content | يمثل النص أو الصورة الفعلية داخل العنصر | يمثل المساحة الداخلية الأساسية التي يشغلها النص أو العنصر |
| Padding | يمثل المسافة الداخلية الفاصلة بين المحتوى وبين حدود العنصر | يزيد من مساحة الصندوق الداخلية ويمنح النص مساحة مريحة للتنفس |
| Border | يمثل الإطار المحيط بالعنصر والذي يفصل بين المساحة الداخلية والخارجية | يحدد شكل الإطار الخارجي للعنصر ويقبل سماكة وألواناً مختلفة |
| Margin | يمثل المسافة الخارجية الفاصلة بين العنصر الحالي وبين العناصر المجاورة له | يصنع مساحات فارغة حول العنصر لتباعد المكونات ومنع تداخلها دون التأثير على حجمه |
| content-box | يحسب العرض المحدد للمحتوى فقط ويضيف عليه قيم الحشو والحدود تلقائياً | يسبب مشكلة تكسير التصميم لأن العرض الفعلي للموقع يصبح أكبر من العرض المحدد في الكود |
| border-box | يجبر المتصفح على حساب قيم الحشو والحدود من ضمن العرض الإجمالي المحدد للعنصر | يحل مشكلة تكسير التخطيطات ويحافظ على ثبات الأبعاد بدقة كاملة في كل المشاريع الحديثة |
كل عنصر HTML يُعامَل في CSS كصندوق مستطيل مكوّن من أربع طبقات من الداخل للخارج:
1. **المحتوى (Content)** — النص أو الصورة 2. **الحشو (Padding)** — المسافة بين المحتوى والحدود 3. **الحدود (Border)** — الإطار حول العنصر 4. **الهامش الخارجي (Margin)** — المسافة بين العنصر وجيرانه
**المشكلة مع content-box (الافتراضي):** إذا حددت `width: 300px` ثم أضفت `padding: 20px` و`border: 2px`، سيصبح العرض الفعلي 344px — وهذا يكسر التخطيطات.
**الحل: border-box** مع `box-sizing: border-box`، يظل العرض المحدد 300px بغض النظر عن الـ padding والـ border — لأنهما يُحسبان من الداخل.
الممارسة العامة في كل مشاريع CSS الحديثة هي إضافة: `*, *::before, *::after { box-sizing: border-box; }`
| 1 | /* إعادة ضبط عالمية — ضعها دائماً في بداية CSS */ |
| 2 | *, |
| 3 | *::before, |
| 4 | *::after { |
| 5 | box-sizing: border-box; |
| 6 | } |
مثال 1: المقارنة بين النموذجين
| 1 | /* content-box: العرض الفعلي = 300 + 40 + 4 = 344px */ |
| 2 | .box-content { |
| 3 | box-sizing: content-box; |
| 4 | width: 300px; |
| 5 | padding: 20px; |
| 6 | border: 2px solid #000; |
| 7 | } |
| 8 | |
| 9 | /* border-box: العرض الفعلي = 300px دائماً */ |
| 10 | .box-border { |
| 11 | box-sizing: border-box; |
| 12 | width: 300px; |
| 13 | padding: 20px; |
| 14 | border: 2px solid #000; |
| 15 | } |