خاصية Box-Sizing
آخر تحديث: 2026-09-13
box-sizing خاصية Box-Sizing
تحدد خاصية box-sizing كيفية حساب width و height وهي مفتاح فهم نموذج الصندوق في CSS. القيمة الافتراضية content-box تقيس منطقة المحتوى فقط، مع إضافة padding و border فوقها؛ أما border-box فتتضمن padding و border ضمن العرض والارتفاع المحددين، وهو أكثر بداهة. تُعيّن المشاريع الحديثة border-box عالميًا عادةً.
| الفئة | |
|---|---|
| القيمة الأولية | content-box |
| موروث | لا |
| ينطبق على | all |
| نوع الحركة | discrete |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
box-sizing: content-box | border-box;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
content-box | كلمة مفتاحية | يشمل width/height منطقة المحتوى فقط (الافتراضي). |
border-box | كلمة مفتاحية | يشمل width/height المحتوى و padding و border. |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| box-sizing | ✓ v10 | ✓ v12 | ✓ v29 | ✓ v5.1 | ✓ v7 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： يُوصى بتعيين *{box-sizing:border-box} عالميًا حتى يتناسب كل عنصر بحجم متسق، لتجنب مفاجآت التخطيط.
❓ الأسئلة الشائعة
Qما الفرق بين content-box و border-box؟
Aمع content-box، وهو الافتراضي، يشير width فقط إلى منطقة المحتوى ويُضاف padding و border خارجها، لذا يجب عليك إجراء الحساب بنفسك. مع border-box، يتضمن width بالفعل padding و border، لذا فالعرض الذي تحدده هو العرض المرئي النهائي وينكمش المحتوى للداخل. يعد border-box أكثر بداهة، ولذلك تُفعّله المشاريع الحديثة عالميًا لكل عنصر.
Qلماذا يوصي الجميع بـ border-box؟
Aيجعل border-box حساب التخطيط بسيطًا: width:200px هو المساحة الفعلية التي يشغلها العنصر، ويدفع padding و border للداخل بدلًا من توسيع الصندوق وتعطيل التخطيط. هذا مفيد بشكل خاص للتخطيطات المتجاوبة التي تجمع بين عرض بالنسب المئوية وحشو ثابت، لأنه يمنع التجاوز. ولهذا يوصى بإعادة الضبط العالمية *{box-sizing:border-box} على نطاق واسع من الأطر وفي كل تقريبًا من عمليات إعادة ضبط CSS الحديثة.
Qكيف أضبط جميع العناصر إلى border-box عالميًا؟
Aأضف هذا في أعلى CSS الخاص بك: *, *::before, *::after { box-sizing:border-box; }، مما يطبّق border-box على كل عنصر وعنصر شبه. تحذير واحد: إذا كان مكوّن من جهة خارجية، مثل عنصر تحكم في النموذج، يعتمد على السلوك الافتراضي content-box، فقد يؤدي التجاوز العالمي إلى تغيير طريقة عرضه، لذا أعد تلك المكوّنات المحددة إلى content-box إذا لزم الأمر. يزيل هذا التراجع المكون من سطر واحد فئة كاملة من أخطاء التخطيط.
Qما هي العناصر التي تكون border-box افتراضيًا؟
Aفي معظم المتصفحات، بعض عناصر التحكم في النماذج، بما في ذلك input و textarea و select و button، تكون border-box افتراضيًا، لذا يتضمن ارتفاع عنصر input حدوده بالفعل. وكل شيء آخر يكون content-box افتراضيًا. اختلفت المتصفحات تاريخيًا حول box-sizing الافتراضي لعناصر التحكم في النماذج، وهذا بالضبط سبب قيام أطر واجهة المستخدم بتوحيد box-sizing في أنماط إعادة الضبط الخاصة بها؛ وافتراض content-box في كل مكان هو النموذج الذهني الأكثر أمانًا حتى تتجاوزه.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
