بما اننا نتحدث عن عرض width العنصر. ﻻبد ان نلقي نظرة علي الموضوع اﻻهم فى العرض width وهو نموذج الصندوق في CSS . عندما تضبط عرض عنصر HTML  من الممكن ان يبدو  اكبر من العرض الذي خصصتة له، ما السبب؟

السبب: يضاف الي عرض العنصر width سمك الحد border-width وايضا  الحشو padding انظر المثال التالي عنصرين  بنفس العرض ولكن النتيجة مختلفة  ﻻختلاف قيمتي padding و border.

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

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

 شرح نموذج الصندوق في css

شرح نموذج الصندوق في css

ما المشكلة ؟ بحسابات بسيطة  تحل المشكلة:

العرض الكلي للعنصر= width+padding+border-width. اذا كنت تريد لعنصر ما عرض محدد يظهر به علي الصفحة ﻻبد ان تخذ فى الحسبات قيم كلا من padding, border-width حتي يكون العرض فى النهاية كما تريد.

عموما ﻻتقلق بشأن ان تقوم في كل مرة بعمل الحسابات وخصوصا أن لديك بلوكات كثيرة متداخلة (صناديق) بسبب  خاصية Box sizing CSS انقر  للقراءة

رابط مختصر : https://www.aqwce.com/wTer4