Fungsi box-sizing adalah dimana kita mempunyai lebar suatu konten, ketika kita berikan padding lebar dari konten tersebut tidak berubah masih tetap sama, misal disini saya mempunyai sebuah konten dengan lebar 100px dan saya berikan padding 10px, maka lebar konten tersebut masih tetap sama yaitu 100px, konten yang di dalamnya lah yah akan berubah sizenya, seperti itu oke lalu bagaimana cara menggunakannya, simak terus ya teman-teman.

Ada satu lagi yang harus teman-teman perhatikan ketika kita menggunakan box-sizing walaupun lebar pembungkus itu tetap tetapi isi didalamnya akan mengecil jadi saya sarankan ketika kita menggunakan box-sizing apalagi kita sudah untuk sebuah tampilan website saya sarankan untuk menggunakan width dengan persen (%), nantinya ketika kita bermain menggunakan flex, itu juga akan mempengaruhi, apalagi ketika kita ingin membuat website itu responsive satuan persenlah yang disarankan. oke saya rasa sepertinya teman-teman sudah sedikit paham ya tentang fungsi box-sizing di CSS, sekarang kita buat langsung kasusnya dan seperti inilah cara menggnakannya:

dan ini CSSnya

disini saya memberikan display flex supaya hasil yang kita mau itu kekanan, jadi yang tadi lebar kiri 300 dan kanan 700 itu akan menyesuaikan, oke lanjut ya, dan ini hasilnya

Fungsi box-sizing di CSS dan Cara Menggunakannya

Fungsi box-sizing di CSS dan Cara Menggunakannya

Fungsi box-sizing di CSS dan Cara Menggunakannya

untuk yang ke 3 saya belum menggunakan display: flex, jadi hasilnya akan kebawah, jadi seperti itulah jika kita menggunakan lebar menggunakan pixel, oke saya rasa cukup jelas ya belajar kita tentang fungsi box-sizing di CSS dan Cara Menggunakannya, semoga bermanfaat dan sampai jumpa pada artikel berikutnya terimakasih.