เมื่อเราจัดวางหน้าเว็บ เรามักจะพบกับสถานการณ์ที่ความกว้างหรือความสูงของหน้าเว็บสุดท้ายเกินกว่าที่เราคำนวณไว้ล่วงหน้า ซึ่งจริงๆ แล้วมีสาเหตุมาจากสิ่งที่เรียกว่า CSS box model
| #test{ระยะขอบ:10px;padding:10px;width:100px;height:100px;} |
เช่นเดียวกับโค้ดด้านบน หลายครั้งเราจะคำนวณตำแหน่งที่ใช้เป็นความกว้าง: 120px ความสูง: 120px เนื่องจากภายใต้ความเข้าใจปกติ การเสริมคือระยะขอบด้านใน ซึ่งควรจะรวมไว้ในความกว้าง และระยะขอบคือขอบด้านนอก Distance ดังนั้น width=margin-left + margin-right + width แต่การตีความของเบราว์เซอร์เกี่ยวกับโมเดลกล่อง CSS นั้นไม่เหมือนกัน ดังนั้นในที่สุดเราจะพบว่าความกว้างและความสูงของหน้าเว็บที่จัดวางจะเกินขนาดของเรา การคำนวณที่คาดหวัง และสุดท้ายก็ทำให้เกิดการจัดแนวการแสดงผลที่ไม่ตรง
ในความเป็นจริง การคำนวณตำแหน่งที่แท้จริงของการทดสอบควรเป็น width=margin-left + margin-right + padding-left + padding-right + width นั่นคือขนาดที่แท้จริงของความกว้างควร เป็นระยะขอบด้านใน + ขอบด้านนอก +ความกว้าง กล่าวคือ ขนาดจริงของการทดสอบควรเป็น 140px การคำนวณความสูงจะเหมือนกับการคำนวณความกว้าง
และหากมีการเพิ่มเส้นขอบในการทดสอบ อัลกอริธึมความกว้างและความสูงควรเพิ่มขนาดของเส้นขอบด้วย
| #test{ระยะขอบ:10px;padding:10px;border:5px;width:100px;height:100px;} |
ความกว้างของการทดสอบที่นี่ควรเป็นเส้นขอบด้านนอก + เส้นขอบด้านใน + เส้นขอบ + ความกว้าง ดังนั้นความกว้างของการทดสอบคือ 150px
ดังที่แสดงในภาพด้านล่าง ตำแหน่งจริงที่มีความกว้างและความสูงไม่ใช่พื้นที่ขนาดเล็ก แต่ควรยาวไปจนถึงชั้นสีน้ำเงินเข้มด้านนอกสุด
