Box-Sizing: Content-Box مقابل Border-Box
افهم كيف تغيّر box-sizing طريقة احتساب العرض والارتفاع لتشمل الحشو والحدود.
Box-Sizing: Content-Box مقابل Border-Box درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.
مشكلة box-sizing
يضبط CSS، افتراضيًا، width على منطقة المحتوى فقط. وتؤدي إضافة الحشوة أو الحد إلى زيادة الحجم المُعروض الفعلي للعنصر، مما قد يسبب الالتباس والأخطاء.
<div class="box">200px + padding + border = 244px rendered</div>
content-box (الافتراضي)
تُعدّ box-sizing: content-box القيمة الافتراضية. تنطبق قيمتا width وheight على المحتوى فقط. وتُضاف الحشوة والحدود فوق ذلك، مما يزيد حجم العنصر عن الحجم المحدد.
border-box
مع box-sizing: border-box، تشمل قيمتا width وheight المحتوى + الحشوة + الحدود. ويبقى العنصر بالحجم المصرّح به تمامًا، بغض النظر عن الحشوة أو الحدود.
<div class="box">Exactly 200px rendered width</div>
إعادة ضبط border-box لجميع العناصر
طبّق border-box على جميع العناصر باستخدام إعادة الضبط الموصى بها لجميع العناصر:
<div class="demo-box">Width stays exactly 200px</div>
لماذا نستخدم inherit بدلًا من *
يتيح نمط بديل للمكوّنات تجاوز قيمة box-sizing عند الحاجة:
<div class="demo-box">Inherited border-box sizing</div>
العرض النسبي + الحشوة
تظهر الفائدة العملية الأساسية من border-box عند استخدام العروض النسبية. فعنصر بعرض width: 50% وحشوة مقدارها 20px يبقى عرضه 50% تمامًا من عرض العنصر الأب، من دون تجاوز حدوده.
<div class="col">50% wide column with padding, no overflow</div>
لا يتضمن border-box الهامش
حتى مع استخدام border-box، لا يُضمَّن الهامش في العرض المصرّح به. إذ يضيف الهامش دائمًا مساحة خارج العنصر، فوق أبعاده المحددة.
تاريخيًا: لماذا تُعدّ content-box القيمة الافتراضية؟
اختلفت المتصفحات تاريخيًا في تطبيق نموذج الصندوق. وحّدت W3C المواصفة على content-box، بينما استخدم IE القيمة border-box. تستخدم CSS الحديثة content-box افتراضيًا للامتثال لمواصفات W3C، لكن جميع المشاريع تقريبًا تغيّرها إلى border-box.
فحص نموذج الصندوق في DevTools
تعرض لوحة Elements في Chrome DevTools مخططًا لنموذج الصندوق، مع أبعاد المحتوى والحشوة والحدود والهامش بدقة. وهذه أسرع طريقة لتصحيح مشكلات تغيير الحجم.
يستخدم Grid وFlexbox دلالات border-box داخليًا
يحدّد كل من CSS Grid وFlexbox أحجام المسارات والعناصر دائمًا وفق دلالات border-box، بغض النظر عن إعداد box-sizing الخاص بالعنصر. وهذا يجعل حسابات الأحجام قابلة للتنبؤ.
min/max مع border-box
تعمل كل من min-width وmax-width وmin-height وmax-height بالطريقة نفسها التي تعمل بها width — إذ تشمل الحشوة والحدود عند تفعيل border-box.
تحقق سريع
مع box-sizing: border-box، ما عرض منطقة المحتوى لعنصر مُصرّح له بالقيمتين width: 300px; padding: 30px;؟
مراجعة
تضمّن box-sizing: border-box الحشوة والحدود في العرض المصرّح به، مما يمنع الزيادة غير المتوقعة في الحجم. طبّقه على جميع العناصر باستخدام *, *::before, *::after { box-sizing: border-box }. ولا يُضمَّن الهامش مطلقًا في أي من نموذجي الصندوق.
الأسئلة الشائعة
هل درس «Box-Sizing: Content-Box مقابل Border-Box» مجاني؟
نعم — نص درس «Box-Sizing: Content-Box مقابل Border-Box» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.
ماذا ستتعلم في «Box-Sizing: Content-Box مقابل Border-Box»؟
افهم كيف تغيّر box-sizing طريقة احتساب العرض والارتفاع لتشمل الحشو والحدود. تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟
لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «Box-Sizing: Content-Box مقابل Border-Box»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟
نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- فهم Width وHeight وMargin وPadding
- أنماط الحدود وعرضها ولونها
- Box-Sizing: Content-Box مقابل Border-Box
- Outline وBox-Shadow