عندما نصمم صفحة ويب، غالبًا ما نواجه موقفًا يتجاوز فيه عرض أو ارتفاع صفحة الويب النهائية حساباتنا المسبقة، ويرجع ذلك في الواقع إلى ما يسمى بنموذج مربع CSS.
| #اختبار{الهامش:10px;الحشو:10px;العرض:100px;الارتفاع:100px;} |
كما هو الحال في الكود أعلاه، سنحسب الموضع الذي يشغله عدة مرات مثل العرض: 120 بكسل، الارتفاع: 120 بكسل، لأنه في الفهم العادي، الحشو هو الهامش الداخلي، الذي يجب تضمينه في العرض، والهامش هو الحافة الخارجية. المسافة، لذا width=margin-left + Margin-right + width، لكن تفسير المتصفح لنموذج مربع CSS ليس هو نفسه، لذا في النهاية سنجد أن عرض وارتفاع صفحة الويب الموضوعة سيتجاوز ما لدينا الحسابات المتوقعة، وأخيرا تسبب اختلال العرض.
في الواقع، ليس الأمر كذلك، يجب أن يكون الحساب الحقيقي للموضع الذي يشغله الاختبار هو العرض = الهامش الأيسر + الهامش الأيمن + الحشو الأيسر + الحشو الأيمن + العرض، أي أن الحجم الحقيقي للعرض يجب أن يكون. يكون الهامش الداخلي + الهامش الخارجي + العرض نفسه، أي أن الحجم الحقيقي للاختبار يجب أن يكون 140 بكسل. حساب الارتفاع هو نفس حساب العرض.
وإذا تمت إضافة حد إلى الاختبار، فيجب أن تضيف خوارزمية العرض والارتفاع أيضًا حجم الحد.
| #اختبار{الهامش:10px;الحشو:10px;الحدود:5px;العرض:100px;الارتفاع:100px;} |
عرض الاختبار هنا يجب أن يكون الحد الخارجي + الحد الداخلي + الحد + العرض نفسه، بحيث يكون عرض الاختبار 150 بكسل.
كما هو موضح في الشكل أدناه، فإن الموضع الفعلي الذي يشغله العرض والارتفاع ليس هو المساحة الصغيرة نفسها، ولكن يجب أن يمتد حتى الطبقة الزرقاء الداكنة الخارجية.
