Saat kita menata halaman web, kita sering menjumpai situasi dimana lebar atau tinggi halaman web akhir akan melebihi perhitungan awal kita. Hal ini sebenarnya disebabkan oleh apa yang disebut model kotak CSS.
| #test{margin:10px;padding:10px;width:100px;height:100px;} |
Seperti pada kode di atas, berkali-kali kita akan menghitung posisi yang ditempatinya sebagai lebar: 120px, tinggi: 120px, karena dalam pemahaman normal, padding adalah margin dalam, yang harus dimasukkan dalam lebar, dan margin adalah tepi luar. jarak, jadi lebar=margin-kiri + margin-kanan + lebar, tetapi interpretasi browser terhadap model kotak CSS tidak sama, jadi pada akhirnya kita akan menemukan bahwa lebar dan tinggi halaman web yang ditata akan melebihi milik kita perhitungan yang diharapkan, dan akhirnya menyebabkan ketidaksejajaran tampilan.
Faktanya, tidak demikian halnya. Perhitungan sebenarnya dari posisi yang ditempati oleh pengujian haruslah width=margin-left + margin-right + padding-left + padding-right + width, yaitu ukuran lebar sebenarnya yang seharusnya. menjadi margin dalam + margin luar. +Lebarnya sendiri, artinya, ukuran pengujian sebenarnya harus 140px. Perhitungan tinggi sama dengan perhitungan lebar.
Dan jika batas ditambahkan ke pengujian, algoritma lebar dan tinggi juga harus menambahkan ukuran batas.
| #test{margin:10px;padding:10px;border:5px;width:100px;height:100px;} |
Lebar pengujian di sini harus berupa batas luar + batas dalam + batas + lebar itu sendiri, sehingga lebar pengujiannya adalah 150px.
Seperti terlihat pada gambar di bawah, posisi sebenarnya yang ditempati oleh lebar dan tinggi bukanlah area kecil itu sendiri, melainkan harus sampai ke lapisan biru tua terluar.
