Box-sizing di CSS3

Pada CSS3 telah ditambahkan property box-sizing untuk membuat layout website. Property ini bisa diisi dengan 2 macam nilai yaitu

1. content-box
   Jika box-sizing diisi dengan content-box maka ini mirip dengan css box model versi 2.1.
2. border-box
   Pengisian dengan border-box akan memudahkan kita dalam membuat layout karena width dalam border-box ini merupakan
   width content + padding + border

Sebagai contoh ketiga coding ini memberikan hasil yang sama jika browser yang anda pakai sudah mendukung box-sizing secara penuh:

1. CSS2.1 box model http://aris.proweb.asia/css_box_model.html :
           width: 200px;
           padding-left: 10px;
           padding-right: 30px;
           border-left-width: 20px;
           border-right-width: 40px;       
2. dengan box-sizing: content-box http://aris.proweb.asia/css3_box_sizing1.html :
           box-sizing: content-box;
           width: 200px;
           padding-left: 10px;
           padding-right: 30px;
           border-left-width: 20px;
           border-right-width: 40px;
3. dengan box-sizing: border-box http://aris.proweb.asia/css3_box_sizing2.html :
           box-sizing: border-box;
           width: 300px;
           padding-left: 10px;
           padding-right: 30px;
           border-left-width: 20px;
           border-right-width: 40px;

Ketiga coding di atas menghasilkan tampilan yang sama yaitu:

Kunjungi www.proweb.co.id untuk menambah wawasan anda.