Satuan (unit) dalam CSS

Satuan (unit ) yang digunakan untuk mengatur tingg (height) dan lebar (width) suatu elemen html umumnya berikut ini yaitu

  1. px (pixel), satuan yang absolut atau fixed, jadi setiap elemen yang diberikan ukuran tinggi / lebar menggunakan satuan px maka ukuran nya pasti tidak berubah ubah meskipun ukuran dari browser atau container nya berubah. Contoh div{ height :300px; width:300px }
  2. %, satuan relatif terhadap ukuran dari parentnya (browser/ container), setiap elemen yang diberikan ukuran tinggi/ lebar menggunakan satuan % maka ukurannya akan mengikuti ukuran browser/ continernya.

Source code dimensi menggunakan satuan px

<!DOCTYTPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="description" content="Gudang Kode">
		<meta name="keyword" content="HTML, CSS, Javascript">
		<meta name="author" content="Muhammad Usman">
		
		<title>Dimensi</title>
		
		<style>
			div{
				background-color:lightblue;
				height:100px;
				width:100px;
			}
		</style>
		
	</head>
	
	<body>
		<div>
			Gudang Kode
		</div>
	</body>
</html>

Menghasilkan

Ukuran div akan tetap 100px meskipun ukuran dari browser/ container berubah

Source code dimensi menggunakan satuan %

<!DOCTYTPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="description" content="Gudang Kode">
		<meta name="keyword" content="HTML, CSS, Javascript">
		<meta name="author" content="Muhammad Usman">
		
		<title>Dimensi</title>
		
		<style>
			div{
				background-color:lightblue;
				width:100%;
				height:100px;				
			}
		</style>
		
	</head>
	
	<body>
		<div>
			Gudang Kode
		</div>
	</body>
</html>

Menghasilkan

Apabila ukuran dari browser/ container berubah maka ukuran dari div akan menyesuaikan sesuai dengan nilai yang diberikan, jika 100% maka dia akan selalu memenuhi layar. Satuan % cocok digunakan ketika kita membuat website yang responsive.

Semoga membantu

Leave a comment