Pada kesempatan kali ini, saya akan membagian sebuah tutorial kecil yang sempat saya bagikan dan waktu luang saya yaitu CSS3 box-sizing. Properti ini bisa dibilang properti yang paling berguna dalam proses pembuatan template dan saya menemukan box-sizing ini seminggu yang lalu pada sebuah situs zell-weekeat, pada CSS3 ini bisa membantu kita dalam mengatur lebar area/elemen sehingga jika dilakukan penambahan padding pada elemen tersebut maka lebar dari elemen tersebut tidak akan berubah/tetap.
box-sizing sudah mempunyai atribut default yaitu content-box, border-box, dan ada juga padding-box(namun atribut padding-box ini tidak medukung/kompatibel untuk FF).

Pada gambar diatas anda bisa melihat perbedaan lebar dari masing-masing properti. Sejauh ini box-sizing tidak mendukung pada IE7, namun anda bisa memperbaikinya dengan menggunakan Scheep.

Untuk penerapannya pada semua elemen bisa menggunakan kode dibawah ini:

*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

Atau kamu ingin menerapkan box-sizing ini pada elemen tertentu yang anda miliki, anda bisa menggunakan kode dibawah ini:

namaelemen {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

Ganti namaelemen dengan nama id/class elemen yang anda miliki.

nah, demikian penjelasan singkat tentang box-sizing yang mungkin bisa anda pahami,
Semoga dengan CSS3 ini dapat membantu anda dalam membangun layout yang anda miliki sendiri.


Sumber referensi artikel - Zell Liew · MKR