box-size

Box-sizing

BagikanShare on FacebookShare on Google+Tweet about this on TwitterEmail this to someoneShare on LinkedIn

Untuk kesempatan kali ini mari kita bahas tentang property Box-Sizing. apa itu Box-sizing?

Box-Sizing adalah properti yang terdapat pada css3 yang fungsinya memungkinkan untuk membuat suatu div yang memiliki width tetap dalam ukuran aslinya meski didalamnya terdapat div yang mendorong ukurannya untuk melebar.

Untuk lebih jelasnya perhatikan analoginya dari gambar berikut:

box-sizing2

Pada gambar diatas menunjukan div yang memiliki ukuran width:50%; terjatuh ke bawah dikarenakan dari ukurannya terdorong oleh border.

akantetapi,  jika pada div tersebut diberi property box-sizing, maka div tidak akan terjatuh kebawah dan border yang berada pada div tersebut tidak akan merubah ukuran asli dari divnya.

Untuk analoginya perhatikan gambar berikut”

box-sizing1

Berikut contoh dari property box-sizing:

<!DOCTYPE HTML>
<html>
<head>
<title>Box Sizing</title>
<script type="text/javascript" src="js/jquery.js"></script>
<style type="text/css">

	.box{
		width: 400px;
		background: #ccc;
		border: 4px solid #ff0000;
	}

	.box-size{
		float: left;
		border: 10px solid #333;
		text-align: justify;
		width: 50%;
		box-sizing:border-box;

	}

</style>	
</head>
<body>
	<div class="box">
		<div class="box-size">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt </div>
		<div class="box-size">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt </div>
		<div style="clear:both;"></div>
	</div>
</body>
</html>
BagikanShare on FacebookShare on Google+Tweet about this on TwitterEmail this to someoneShare on LinkedIn
About Ihsan atkia

Ihsan Atkia adalah seorang Front-end Developer yang merambah sebagai UI/UX Web Designer, kecintaannya terhadap dunia Desain muncul semasa sekolah menengah atas (SMA), dengan bergabung di komunitas desain, kemudian melanjutkan di salah satu perguruan tinggi negeri di kota Bandung mengambil jurusan Teknik Informatika, aktif di salah satu club yang bernama Ruang Grafis dan menjadi pengurus club tersebut. dan sampai sekarang masih berkecimpung didunia Web Design khususnya bidang Front-end Developer dan UI/UX Web Designer.

Comments

  1. Andi says:

    Thanx bro insan atkia.. tipsnya kerenn :)

  2. Hafid says:

    Kenapa tidak menggunakan class div dengan width ?