Selamat Datang

Mengenal Box Sizing CSS3

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.

Box Sizing CSS3

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

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.

.container{
		width:700px;
		overflow:hidden;
		background:#f4f4f4;
		margin:20px;
	}
	.box{
		float:left;
		width:200px;
		height:200px;
		background:yellow;
		border:10px solid #000;
		padding:10px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-ms-box-sizing: border-box;
		-o-box-sizing: border-box;
		box-sizing: border-box;
	}
	.box2{
		float:left;
		width:500px;
		height:200px;
		background:orange;
		border:10px solid #f20000;
		padding:10px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-ms-box-sizing: border-box;
		-o-box-sizing: border-box;
		box-sizing: border-box;
	}

Sekian, Salam web design Indonesia.

Ref:
http://www.w3.org/TR/CSS2/box.html
http://www.w3.org/TR/css3-box/





Penulis :

Website yang berisi Tutorial, Tips, Trik, Inspirasi, Opini, Cerita, Studi kasus, dan berbagai hal menarik tentang Web Design, Web Development dan Graphic Design untuk orang-orang kreatif di Indonesia. View all posts by TWD Editorial

Comments

7 thoughts on “Mengenal Box Sizing CSS3

  1. Bima says:

    Tulisan yang sangat menarik. Terima kasih

  2. hanif ibrahim says:

    wahh mantap nih jadi gampang

  3. Alam says:

    saya baru ngerti nih. bisa jadi spesifik design. Thanks mas, tulisannya :)

  4. kalo layout nya pake % apa perlu pake box-sizing ini ?

  5. ryu says:

    Terima kasih tutorialnya,sgt bermanfaat

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development