Iklan bawah header

Belajar CSS : Mengatur Height dan Width pada CSS

Height dan width

Pada pembahasan kali ini, kita akan membahas mengenai height dan width. height dan width merupakan 2 property yang digunakan untuk mengatur tinggi dan lebar dari sebuah objek.

Ada beberapa satuan yang bisa digunakan untuk mengatur ukuran sebuah objek dari property height dan width, yakni auto, satuan px, satuan cm dan satuan percent (%). Coba lihat contoh berikut ini :

<!DOCTYPE html>
<html>
<head>
	<title>Belajar Height dan Width Obyek</title>
<style type="text/css">
	div {
		width: 500px;
		height: 300px;
		border: solid 1px black;
		background-color: red;
	}
</style>
</head>
<body>
<div>
	
</div>
</body>
</html>

Jalankan kode diatas di browser, maka hasilnya akan seperti dibawah ini :

Height dan width

Dari gambar diatas, terdapat objek berwarna merah karena kita menggunakan property background-color dengan nilai red. Tinggi dari objek tersebut 300 pixel dan lebarnya 500 pixel. Di sisinya terdapat border berwarna hitam, karena kita menggunakan property border dengan value : solid 1px black.

Property max-width dan max-height

Pada bagian sebelumnya sudah kita bahas mengenai property width dan height, nah pada bagian ini akan dibahas mengenai property max-width dan max-height. Property tersebut digunakan untuk menset batas maximal dari ukuran sebuah ojek. Coba perhatikan contoh berikut ini :


<!DOCTYPE html>
<html>
<head>
	<title>Belajar Height dan Width Obyek</title>
<style type="text/css">
	.contoh{
		max-width: 300px;
		border: solid 1px black;
		background-color: blue;
		color:white;
	}
    .contoh2{
		border: solid 1px black;
		background-color: blue;
		color:white;
	}
</head>
<body>
<div class="contoh">
	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf
</div>

<div class="contoh2">
	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf	ini adalah sebuah paragraf
</div>

</body>
</html>
Max-width

Dari gambar diatas, terlihat terdapat 2 obyek yang berbeda yang satu telah diset pada bagian max-width sehingga ketika terdapat banyak teks di dalam obyek tersebut maka secara otomatis bertambah tingginya. dan yang satunya tidak diset pada bagian max-width sehingga tidak ada batasan pada bagian lebar obyek.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel