نموذج الصندوق

تكتب width: 200px ثم تقيس العنصر فتجد عرضه 248، والسبب أن القيمة الافتراضية للخاصية box-sizing هي content-box، أي أن العرض الذي تكتبه للمحتوى وحده، ثم يُضاف إليه الحشو والإطار.

أما box-sizing: border-box فيجعل العرض شاملًا للحشو والإطار، فإذا كتبت 200 كان العرض 200 فعلًا، ولهذا يبدأ كل ملف CSS احترافي تقريبًا بالقاعدة *{box-sizing:border-box}.

وتذكّر أن الحشو في الداخل والهامش في الخارج، فالحشو يكبّر الصندوق ويأخذ لون خلفيته، والهامش يبعده عن العناصر المجاورة ويبقى شفافًا.