box-sizing

خاصية حساب أبعاد الصندوق box-sizing

خاصية box-sizing: border-box تجعل width شاملة للحشوة والحدود — السطر الذي يبدأ به كل مشروع CSS عاقل.

افتراضي CSS التاريخي (content-box) يحسب width للمحتوى وحده، ثم يضيف padding وborder فوقها — فيصبح صندوق width:200px مع padding:20px عرضه الفعلي 240px وتنهار حساباتك. border-box يقلب المعادلة للبدهي: العرض المعلن هو النهائي شاملًا كل شيء، والمحتوى ينكمش داخله.

لهذا أول سطر في globals كل مشروع حديث (وTailwind وأطر الواجهات كلها تطبقه): التطبيع الشامل على كل العناصر.

الصياغة

*, *::before, *::after {
  box-sizing: border-box; /* سطر بداية كل مشروع */
}

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

🎨 محرّر HTML/CSS

<style>
  .cb, .bb { width: 200px; padding: 20px; border: 4px solid #7c5cff; background: #ede9fe; border-radius: 8px; margin-bottom: 8px; }
  .bb { box-sizing: border-box; }
  .cb { box-sizing: content-box; }
</style>
<div class="cb">content-box: أنا أعرض من 200px فعليًا (248px!)</div>
<div class="bb">border-box: أنا 200px بالضبط كما وعدت</div>

النتيجة المباشرة:

أهم القيم

القيمة	الوظيفة
border-box	العرض المعلن نهائي شامل الحشوة والحدود — الصواب دائمًا
content-box	الافتراضي التاريخي: العرض للمحتوى فقط — مصدر المفاجآت

💡 نصائح عملية

لا تناقش: التطبيع الشامل border-box أول كل مشروع، وانسَ الموضوع للأبد
عمودان 50% + padding يفيضان عن أبيهما؟ هذه بصمة content-box الكلاسيكية

⚠️ أخطاء شائعة

نسيان التطبيع ثم مطاردة «لماذا أعرض من المطلوب؟» عنصرًا عنصرًا
خلط الوضعين بنفس الواجهة — حسابات ذهنية مزدوجة بلا داعٍ

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار CSS الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs