Fungsi dan kegunaan box-sizing pada CSS

Kegunaan box-sizing

Pada CSS3 terdapat fitur baru yaitu properti box-sizing. Dengan properti ini Anda bisa menggunakannya untuk membuat suatu box elemen memiliki width dan height tetap dalam ukuran aslinya meski pun didalamnya terdapat properti padding dan border.

Perhitungan box-sizing

Secara default, lebar dan tinggi suatu elemen dihitung bergantung pada width, height, padding dan border. Untuk lebih jelasnya silakan lihat box dibawah ini:

Box div ini memiliki:
*width 300px
*height 150px
*padding 20px
*border 10px

Berapa lebar dan tinggi dari box diatas?

Mungkin Anda mengira lebar 300px dan tinggi 150px bukan?

Jika demikian perhitungan Anda salah.

Jadi browser menghitungnya seperti ini:

Kita memberikan width sebesar 300px dan height 150px!
ditambah padding sebesar 20px, maka total padding menjadi 80px (untuk width: 20px left dan 20px right. untuk height: 20px top dan 20px bottom) Jadi total width menjadi: 340px dan height 190px.

Lalu kita akan menghitung border:

ditambah border sebesar 10px, maka total border menjadi 40px (untuk width: 10px left dan 10px right. untuk height: 10px top dan 10px bottom) Jadi total width menjadi: 360px dan height 210px.

Dalam dunia CSS, kasus seperti ini disebut dengan box-model. Terdapat dua properti
yang mempengaruhi ukuran dari sebuah box yaitu padding dan border. Perhatikan
skema box model berikut untuk contoh kasus di atas :

Memperbaiki box model

Dengan properti box-sizing Anda bisa memperbaiki suatu elemen box/kotak agar sesuai dengan properti width dan height.

#box1 {
    width: 300px;
    height: 150px;
	background-color: yellow;
    box-sizing: border-box;
}
#box2 {
    width: 300px;
    height: 150px;
	background-color: yellow;
    padding:  20px;
    box-sizing: border-box;
}
#box3 {
    width: 300px;
    height: 150px;
    border: 10px solid black;
    box-sizing: border-box;
}
#box4 {
    width: 300px;
    height: 150px;
    padding: 20px;
    border: 10px solid black;
    box-sizing: border-box;
}

Sekarang Anda tidak perlu khawatir tentang ukuran akhir kotak elemen jika menambahkan properti padding atau border.

Jika Anda perhatikan contoh diatas, itu berarti Anda harus melakukan perulangan box-sizing: border-box; untuk memastikan bahwa semua elemen diukur dengan cara yang lebih intuitif.

Contoh dibawah ini menerapkan ke semua elemen dengan menggunakan selektor bintang * :

*  {
    box-sizing: border-box;
}