Box Sizing

Box model dalam sebuah css bekerja seperti ini :

width + padding + border = actual visible/rendered width of box 
height + padding + border = actual visible/rendered height of box

Ini kelihatan aneh, tapi kita terbiasa dengan hal itu. Dalam IE 6 dan sebelumnya, ketika dalam "quirks mode" box model diperlakukan berbeda.


width = actual visible/rendered width of box
height = actual visible/rendered height of box

Nilai-nilai border dan padding pindah ke dalam, memotong lebar / tinggi dari kotak daripada mengembangkannya. Berikut ini adalah contoh dari perbedaan itu:

Untuk mengatasi hal ini, kita bisa menggunakan property dari css 3, yaitu "box-sizing". Dengan box-sizing, padding maupun border tidak akan melebihi kotak pembungkusnya. sehingga, seolah-olah padding maupun border tidak di anggap, walaupun di anggap tapi keduanya tidak akan melebihi dari kotak pembungkusnya.

berikut contoh untuk penggunaan box-sizing :

1. -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
2. -moz-box-sizing: border-box;    /* Firefox, other Gecko */
3. box-sizing: border-box;         /* Opera/IE 8+ */

Box-sizing tidak bekerja dengan min-width / max-width / min-height / max-height tetapi dengan satu pengecualian : firefox. Di firefox modern seperti versi 11, box-sizing tidak di anggap. Lihat fiddle ini oleh Beau Smith untuk ilustrasi masalah ini. Bugs ini telah di ketahui sejak 2005.

ket :
Chrome (any) : box-sizing
Opera 8.5+ : box-sizing
Firefox (any) : -moz-box-sizing
Safari 3 : -webkit-box-sizing (unprefixed in 5.1+ versions)
IE8+ : box-sizing

referensi : css tricks (box-sizing)