جاري التحميل...

Box Sizing في CSS

تعرف بالفعل أن الـ padding والحد قد يجعلان الصندوق أكبر من width المعلن. box-sizing يختار قاعدة هذا الحساب: هل width تعني «المحتوى فقط»، أم «المحتوى مع padding والحد»؟

نموذجان بنظرة واحدة

📊 content-box مقابل border-box

النموذج ماذا يغطي width / height الأثر اليومي
content-box (الافتراضي) المحتوى فقط الـ padding والحد يُضافان خارج الحجم المعلن
border-box محتوى + padding + حد الحجم المعلن هو حافة الحد الخارجية؛ المحتوى ينكمش ليتسع
Margin غير مشمول في أي منهما الفجوة الخارجية تبقى منفصلة عن box-sizing

الافتراضي: content-box

مع النموذج الافتراضي، width: 200px يقيس المحتوى. أضف padding وحداً فيكبر الصندوق الملوّن.

Content-box (افتراضي)

css
CSS Code 
.panel-content {
box-sizing: content-box;
width: 200px;
padding: 20px;
border: 4px solid #0f766e;
background-color: #ccfbf1;
}
/* محتوى 200px + padding + حد → إجمالي أعرض */

انتقل إلى border-box

مع border-box، نفس width: 200px يشمل الـ padding والحد. تبقى الحافة الخارجية أقرب إلى 200px؛ منطقة المحتوى تصغر.

قياس border-box

css
CSS Code 
.panel-border {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 4px solid #0f766e;
background-color: #99f6e4;
}
/* صندوق الحد الخارجي يستهدف 200px؛ المحتوى ينكمش */

نفس الأرقام، بصمة مختلفة

ضع النموذجين جنباً إلى جنب بعرض وpadding وحدّ متطابقين.

قارن النموذجين

css
CSS Code 
.contenty {
box-sizing: content-box;
width: 180px;
padding: 16px;
border: 6px solid #b45309;
background-color: #fef3c7;
}

.borderish {
box-sizing: border-box;
width: 180px;
padding: 16px;
border: 6px solid #b45309;
background-color: #fde68a;
}
/* نفس التصريحات؛ .contenty يشغل مساحة أفقية أكبر */

لماذا تحب الفرق border-box

عندما يجب أن تملأ البطاقة العمود تماماً — مثل width: 100% مع padding — يبقي border-box البطاقة من الفيضان خارج الأب.

بطاقة ودّية للعمود

css
CSS Code 
.card {
box-sizing: border-box;
width: 100%;
padding: 1.25rem;
border: 1px solid #cbd5e1;
background-color: #ffffff;
}

عادة عالمية هادئة

كثير من جداول الأنماط تضبط border-box مرة لكل شيء لتبقى حسابات العرض اليومية متوقعة. الـ margin ما زال في الخارج.

عادة border-box العالمية

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

جرّب بنفسك

  1. ابنِ .panel-content بـ width: 200px وpadding وحد تحت content-box.
  2. انسخه إلى .panel-border مع box-sizing: border-box — راقب الحجم الخارجي يقترب من 200px.
  3. ضع .contenty و.borderish جنباً إلى جنب بنفس الأرقام.
  4. اصنع بطاقة width: 100% مع padding؛ بدّل box-sizing وانظر أيهما يفيض.
  5. جرّب عادة * العالمية في صفحة تجريبية صغيرة.

أخطاء شائعة

  • الاعتقاد أن border-box يشمل الـ margin أيضاً (لا يشمل)
  • نسيان أن الافتراضي content-box حتى تغيّره
  • توقّع أن يتبع الـ outline الـ box-sizing (الـ outline يبقى خارجاً ولا يأخذ مساحة تخطيط)
  • إعلان width: 100% مع padding ثقيل تحت content-box والتعجّب من الفيضان
  • خلط النسب المئوية دون معرفة أي نموذج قياس نشط

ملخص

  • الافتراضي box-sizing: content-box يقيس المحتوى؛ الـ padding والحد يُضافان
  • border-box يبقي الـ padding والحد داخل العرض/الارتفاع المعلن
  • الـ margin خارج النموذجين
  • الـ border-box غالباً يسهّل عرض الأعمدة وبطاقات width: 100%
  • إعادة ضبط border-box عالمياً عادة شائعة وهادئة

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع

❓
8
الأسئلة
🎯
70%
للنجاح
♾️
∞
الوقت
🔄
∞
المحاولات

📝 التعليمات

  • اقرأ كل سؤال بعناية
  • اختر أفضل إجابة لكل سؤال
  • يمكنك إعادة الاختبار عدة مرات كما تريد
  • سيتم عرض تقدمك في الأعلى
الموضوع 1 من 1
Css درس تعليمي