Tutorial Belajar CSS: Cara Mengatur Tinggi Element HTML (height)

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>

Cara Mengatur tinggi element HTML dengan CSS

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>

Cara Mengatur lebar dan tinggi element HTML dengan CSS

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>
   div {
     border: 2px solid black;
     margin: 20px;
     background-color: yellow;
   }
   .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>

Cara Mengatur lebar dan tinggi gambar dengan CSS

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.


eBook CSS Uncover Duniailkom
Jika anda ingin belajar cara mendesain web, CSS wajib dikuasai. Duniailkom telah menyusun eBook CSS Uncover yang membahas CSS dengan lebih detail dan lebih lengkap, mulai dari dasar hingga fitur terbaru CSS3 seperti animasi dan web responsive. Penjelasan lebih lanjut bisa ke: eBook CSS Uncover Duniailkom.

Tutorial Terkait:

4 Comments

  1. echo
    16 Nov 15
    • Andre
      16 Nov 15
  2. hari
    09 Feb 17
    • Andre
      11 Feb 17

Add Comment