Setelah membahas property width yang digunakan untuk mengatur lebar element HTML, kali ini kita akan membahas property height CSS untuk mengatur tinggi dari sebuah element HTML.
Cara Mengatur Tinggi Element HTML dengan CSS
Cara penggunaan property height sangat mirip dengan property width, dimana kita tinggal memberikan nilai satuan panjang seperti pixel, persen, dll.
Sebagai contoh, untuk mengatur tinggi sebuah tag <div> sebesar 50 pixel, saya bisa menulis sebagai berikut:
<div style="height: 50px"></div>
Berikut contoh penggunaannya:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
  div {
    width: 50px;
    border: 2px solid black;
    margin: 20px;
Â
    background-color: yellow;
  }
  .kotak1 { height: 10px;}
  .kotak2 { height: 30px;}
  .kotak3 { height: 100px;}
  .kotak4 { height: 150px;}
</style>
</head>
<body>
<div class="kotak1"></div>
<div class="kotak2"></div>
<div class="kotak3"></div>
<div class="kotak4"></div>
</body>
</html>
Dalam contoh diatas, saya membuat 4 tag <div> dengan berbagai nilai height. Seperti yang terlihat, masing-masing 'kotak' akan memiliki tinggi yang berbeda-beda.
Jika dikombinasikan dengan property width, kita bisa mengatur tinggi dan lebar dari setiap element HTML, seperti contoh berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
  div {
    border: 2px solid black;
    margin: 20px;
    background-color: yellow;
  }
  .kotak1 { width: 10px; height: 10px;}
  .kotak2 { width: 100px; height: 30px;}
  .kotak3 { width: 50px; height: 100px;}
  .kotak4 { width: 500px; height: 150px;}
</style>
</head>
<body>
<div class="kotak1"></div>
<div class="kotak2"></div>
<div class="kotak3"></div>
<div class="kotak4"></div>
</body>
</html>
Sekarang setiap kotak memiliki tinggi dan lebar yang berbeda-beda.
Lebih jauh lagi, property width dan height juga bisa digunakan untuk mengatur lebar dan tinggi setiap element di HTML, seperti gambar. Berikut contohnya:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
  .gambar1 { width: 100px; height: 100px;}
  .gambar2 { width: 200px;}
  .gambar3 { height: 300px;}
</style>
</head>
<body>
<img src="autumn_lake.jpg" />
<img class="gambar1" src="autumn_lake.jpg" />
<img class="gambar2" src="autumn_lake.jpg" />
<img class="gambar3" src="autumn_lake.jpg" />
</body>
</html>
Dalam contoh kode HTML dan CSS diatas, saya menampilkan 4 gambar yang sama. Hanya saja ukuran dari tiap gambar diatur menggunakan property width dan height dari CSS.
Property width dan height digunakan untuk menentukan berapa ukuran 'konten' dari sebuah element. Lebar total dari setiap element HTML tidak hanya dari kedua property ini, tapi juga property lainnya yang termasuk kedalam CSS Box Model, yakni padding, border dan margin.
Dalam tutorial selanjutnya akan dibahas tentang cara membuat garis tepi element menggunakan property border.
selamat sore.
saya mau tanya. apkah duniailkom juga menyediakan forum untuk bertukar pendapat. . ???
karena msh bnyak lagi yg mau saya tanyakn.
makasih
Forum khusus belum ada mas, tapi jika ingin tanya2 seputar web programming, bisa menghubungi saya di [email protected].
Bagaimana cara mengetetahui kesalahan saat membuat kode html dan CSS, padahal saya sudah melakukan seperti contoh di atas source jpg juga sudah benar tapi kenapa tidak nampak dibrowser hasilnya?
saya pusing memikirkannya saya telah mengecek kode css yang saya gunakan sama dengan contoh diatas tapi tidak berhasil? bagaimanakah solusinya?
terima kasih
Bisa coba teks editor Komodo Edit: http://komodoide.com/komodo-edit/
Walaupun tidak full menampilkan error, tapi kalau ada kode HTML dan CSS yang salah ketik, biasanya akan memiliki warna yang berbeda.
Juga bisa pastikan nama gambar sudah ditulis lengkap dengan extension, seperti "autumn_lake.jpg", dan nama atribut tidak salah ketik seperti "src" tertulis menjadi "scr".
Maaf mas, di coding nya ada style untuk div tapi di body tidak ada div nya, apakah ada pengaruhnya, saya coba sendiri tanpa style div dan dengan style div hasilnya sama
Oh ya, sepertinya saya lupa menghapus style tersebut… segera di koreksi.. :)