نظام الصندوق الكلي (box-sizing: border-box vs content-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; }`