قيمة width تحتاج إلى مرجع واضح.
الخلاصة السريعة
تحدد box-sizing ما إذا كان العرض المعلن للمحتوى وحده أم للمحتوى مع الحشو والحدود.
content-boxيجعلwidthعرض المحتوى.border-boxيضم الحشو والحدود فيwidth.- الهامش خارج العرض في الحالتين.
- نحدد نموذج الصندوق قبل الحساب.
مثال بقيم ثابتة
اخترنا width:180px، وحشوًا 12px وحدًا 3px لكل جانب. مع content-box، العرض حتى الحد الخارجي 210px. مع border-box، يبقى 180px، ويصير عرض المحتوى 150px: نطرح 30 بدل إضافتها.
حدود المقارنة
هذه صناديق بلا تحويلات أو قيود إضافية. الهامش لا يدخل في الأعداد السابقة. لا يعني border-box أن المحتوى يحتفظ بعرضه؛ تتغير المساحة المتاحة داخله.
المصادر ومتابعة القراءة
- MDN — box-sizing (يفتح في نافذة جديدة)developer.mozilla.org
أُعدّ هذا المقال بصياغة عربية أصلية بالاستناد إلى المصادر أعلاه، وهو مدخل تمهيدي إلى الموضوع. اقرأ منهجية المحتوى وحدوده.