ماذا يفعل box-sizing: border-box؟

Question

Accepted Answer

`box-sizing` يتحكم في **ما تقيسه خصائص `width` و `height` فعلياً**. القيمة الافتراضية (`content-box`) تقيس فقط المحتوى؛ أما `border-box` فتجعلها تشمل الحشوة والحد.

## المشكلة مع القيمة الافتراضية (content-box)

```css
.box {
  box-sizing: content-box; /* the default */
  width: 200px;
  padding: 20px;
  border: 5px solid;
}
/* Rendered width = 200 + 2×20 + 2×5 = 250px  ← bigger than you asked for! */
```

مع `content-box`، الحشوة والحد يتم **إضافتهما على الجزء العلوي** من `width`، لذا ينتهي العنصر بأن يكون أعرض من الرقم الذي حددته. هذا يكسر التخطيطات: صندوق `width: 50%` مع حشوة يتجاوز الـ 50% الخاص به.

## الحل: border-box

```css
.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid;
}
/* Rendered width = 200px TOTAL. Content shrinks to 150px to make room. */
```

مع `border-box`، `width` هو **النهائي** للعرض المعروض — الحشوة والحد يتم طرحهما من الداخل. الرقم الذي تحدده هو الحجم الذي تحصل عليه، وهذا أكثر بديهية.

## إعادة تعيين عالمية

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

تقريباً كل ورقة أنماط حديثة وإطار عمل وإعادة تعيين تطبق هذا عالمياً. يجعل التحديد الحجم متوقعاً: `width: 50%` + الحشوة يبقى بالضبط 50% عريضاً، صندوقا `width: 50%` يجلسان جنباً إلى جنب بدون تجاوز، إلخ.

## لماذا يهم

`border-box` يزيل المصدر الوحيد الأكثر شيوعاً لصداع تخطيط الحسابات — الاضطرار إلى إضافة الحشوة والحد عقلياً إلى كل عرض.

تعيينه عالمياً يعتبر أفضل ممارسة افتراضية، لأن "العرض الذي حددته هو العرض الذي أحصل عليه" هو كيف تتوقع طبيعياً أن يعمل التحديد.