box model

بينما تحدثنا عن خاصية width، كان يتوجب التنويه إلى أهم مشكلة لهذه الخاصية، وهي عندما تقوم بضبط العرض الخاص بعنصر ما، سيظهر العنصر أكبر من الحجم الذي قمت بضبطه. وتفسير الأمر، هو أن وجود حواشي العنصر (padding)، وحدود العنصر (border) ستقوم بتمديد عرض العنصر إلى ما بعد الحد الذي قمت بضبطه. انظر إلى المثال التالي؛ حيث يوجد عنصران، وبنفس قيمة العرض، ولكن مع اختلاف حقيقي بين عرض العنصرين.

.simple {
  width: 500px;
  margin: 20px auto;
}

.fancy {
  width: 500px;
  margin: 20px auto;
  padding: 50px;
  border-width: 10px;
}

حل هذه المشكلة هو حل رياضي. حيث يقوم مطورو صفحات الويب باستخدام CSS، بتحديد قيمة أصغر من التي يريدونها فعليًا، والتي تساوي القيمة الأولية، مطروحًا منها قيمة الحواشي، والحدود. من حسن الحظ، لن نحتاج لهذا بعد الآن!.