CSS Box-Model, Efek Buruk Padding dan Border terhadap Width dan Height

Penyimpangan Nilai

Perlu Anda ketahui bahwa lebar dan tinggi elemen akan mengalami penyimpangan saat Anda menerapkan padding dan border pada elemen:

width:200px;
height:100px;
(tanpa padding/border)

width:200px;
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 hasilnya menjadi seperti ini:

width:176px;
height:86px;
padding:10px;
border:2px solid #000;

Yang Berbeda dengan Internet Explorer

Internet Explorer memiliki interpretasi yang berbeda terhadap kalkulasi CSS Box-Model. Sebagian besar versi IE akan menerjemahkan gabungan lebar, tinggi dan border sebagai lebar itu sendiri. Berbeda dengan standar W3C yang seharusnya (yang juga telah diikuti oleh browser-browser non-IE seperti Chrome, Opera dan Firefox):

CSS Box-Model Internet Explorer dan Non-Internet Explorer

Ada banyak cara untuk mengatasi itu, misalnya dengan menggunakan conditional comment, atau yang sedikit jahat: IE Hack.