Hallo web designer, kali ini tutorial-webdesign.com akan membahas tentang fitur box-sizing yang merupakan salah satu fitur bawaan css3. Semoga ada pelajaran yang bisa diambil dari tulisan tentang box-sizing ini.
Fitur ini cukup berguna karena sedikit menghilangkan pusing yang biasa timbul ketika kita sedang membuat layout web. Dimana biasanya kita menentukan lebar layout yang kita inginkan terlebih dahulu, setelah itu menentukan lebar sidebar dan conten web.
Misal lebar layout yaitu 800px. Kita membaginya menjadi 2 kolom, kiri dan kanan, kiri 200px dan kanan 600px. Setelah dibuat ternyata lebar 800px tidak cukup karena kita membutukan padding dan border. Arg…..Terpaksa harus menghitung ulang dengan mempertimbangkan berapa padding dan berapa border.

Box dimensions
Wah repot ya, nah bagaimana jika kita ingin membuat lebar atau tinggi sebuah element html seperti div memiliki lebar dan tinggi sesuai dengan yang kita inginkan? Solusinya bisa menggunakan fitur Box-Sizing yang ada di css3.
Sebaiknya langsung saja kita melihat contoh penggunaan box-sizing
Cukup tambahkan code box-sizing: border-box;
untuk membuat elemen yang lebarnya sesuai dengan yang kita inginkan. Untuk dapat berjalan diberbagai browser gunakan prefix masing-masing browser.
Sekian, Salam web design Indonesia.
Ref:
http://www.w3.org/TR/CSS2/box.html
http://www.w3.org/TR/css3-box/
Tulisan yang sangat menarik. Terima kasih
wahh mantap nih jadi gampang
saya baru ngerti nih. bisa jadi spesifik design. Thanks mas, tulisannya :)
Absolutely
[…] Ketiga kita membuat box-sizing […]
kalo layout nya pake % apa perlu pake box-sizing ini ?
Terima kasih tutorialnya,sgt bermanfaat