Penyimpangan Nilai
Perlu Anda ketahui bahwa lebar dan tinggi elemen akan mengalami penyimpangan ketika Anda menerapkan padding dan border pada elemen:width:200px;
height:100px;
(tanpa padding/border)
height:100px;
(tanpa padding/border)
width:200px;
height:100px;
padding:10px;
border:2px solid #000;
height:100px;
padding:10px;
border:2px solid #000;
Untuk menyamakan lebar elemen dengan elemen induk, maka Anda harus mengurangi lebar/tinggi elemen sesuai dengan penambahan ketebalan border dan padding:
akurasi lebar elemen = width - (border-left-width + padding-left + padding-right + border-right-width)
akurasi tinggi elemen = height - (border-top-width + padding-top + padding-bottom + border-bottom-width)
Sehingga karenanya menjadi menyerupai ini:
width:176px;
height:86px;
padding:10px;
border:2px solid #000;
height:86px;
padding:10px;
border:2px solid #000;
Yang Berbeda dengan Internet Explorer
Internet Explorer mempunyai interpretasi yang berbeda terhadap kalkulasi CSS Box-Model. Sebagian besar versi IE akan menerjemahkan campuran lebar, tinggi dan border sebagai lebar itu sendiri. Berbeda dengan standar W3C yang seharusnya (yang juga telah diikuti oleh browser-browser non-IE menyerupai Chrome, Opera dan Firefox):
Ada banyak cara untuk mengatasi itu, contohnya dengan memakai conditional comment, atau yang sedikit jahat: IE Hack.