box-sizing يتحكم في ما تقيسه خصائص width و height فعلياً. القيمة الافتراضية (content-box) تقيس فقط المحتوى؛ أما border-box فتجعلها تشمل الحشوة والحد.
المشكلة مع القيمة الافتراضية (content-box)
{
: content-box;
: ;
: ;
: solid;
}
box-sizing يتحكم في ما تقيسه خصائص width و height فعلياً. القيمة الافتراضية (content-box) تقيس فقط المحتوى؛ أما border-box فتجعلها تشمل الحشوة والحد.
{
: content-box;
: ;
: ;
: solid;
}
مع content-box، الحشوة والحد يتم إضافتهما على الجزء العلوي من width، لذا ينتهي العنصر بأن يكون أعرض من الرقم الذي حددته. هذا يكسر التخطيطات: صندوق width: 50% مع حشوة يتجاوز الـ 50% الخاص به.
.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 هو النهائي للعرض المعروض — الحشوة والحد يتم طرحهما من الداخل. الرقم الذي تحدده هو الحجم الذي تحصل عليه، وهذا أكثر بديهية.
*, *::before, *::after {
box-sizing: border-box;
}
تقريباً كل ورقة أنماط حديثة وإطار عمل وإعادة تعيين تطبق هذا عالمياً. يجعل التحديد الحجم متوقعاً: width: 50% + الحشوة يبقى بالضبط 50% عريضاً، صندوقا width: 50% يجلسان جنباً إلى جنب بدون تجاوز، إلخ.
border-box يزيل المصدر الوحيد الأكثر شيوعاً لصداع تخطيط الحسابات — الاضطرار إلى إضافة الحشوة والحد عقلياً إلى كل عرض.
تعيينه عالمياً يعتبر أفضل ممارسة افتراضية، لأن "العرض الذي حددته هو العرض الذي أحصل عليه" هو كيف تتوقع طبيعياً أن يعمل التحديد.