CSS Height/Width

Kali ini kita akan belajar tentang cara mengatur ukuran elemen dengan CSS Height dan Width — yaitu properti untuk menentukan tinggi dan lebar elemen HTML.

Apa Itu `width` dan `height`?

width digunakan untuk mengatur lebar suatu elemen
height digunakan untuk mengatur tinggi suatu elemen

Dengan pengaturan ukuran yang tepat, kamu bisa membuat elemen tampak proporsional, rapi, dan responsif.

Satuan yang Bisa Digunakan

Satuan yang bisa digunakan untuk mengatur height dan width adalah sebagai berikut:

Satuan	Contoh	Keterangan
`px`	`width: 200px`	Ukuran tetap dalam pixel
`%`	`width: 50%`	Persentase dari parent element
`em`/`rem`	`width: 10em`	Relatif terhadap ukuran font
`vw`/`vh`	`width: 100vw`	`vw`: Lebar layar, `vh`: Tinggi layar
`auto`	`width: auto`	Menyesuaikan dengan kontennya

Contoh Dasar

.box {
  width: 300px;
  height: 150px;
  background-color: #4caf50;
  color: white;
  padding: 20px;
}

Contoh Lebar Responsif

.responsive-box {
  width: 80%;         /* 80% dari parent */
  height: auto;       /* Tinggi menyesuaikan isi */
}

Total Ukuran Elemen

Secara default, total ukuran elemen adalah:

width + padding + border

Misalnya:

.box {
  width: 200px;
  padding: 20px;
  border: 2px solid black;
}

Maka lebar total = 200px + 40px (padding kiri-kanan) + 4px (border) = 244px

Kalau mau ukuran tetap 200px total, gunakan:

* {
  box-sizing: border-box;
}

Contoh Kode Lengkap

<!DOCTYPE html>
<html>
<head>
  <style>
    * {
      box-sizing: border-box;
    }

    .kotak {
      width: 300px;
      height: 150px;
      background-color: steelblue;
      color: white;
      text-align: center;
      line-height: 150px; /* Biar teks pas di tengah */
      margin: 20px auto;
    }

    .kotak-responsive {
      width: 80%;
      height: 100px;
      background-color: #ff7043;
      line-height: 100px;
    }
  </style>
</head>
<body>

  <div class="kotak">Lebar 300px</div>
  <div class="kotak kotak-responsive">Lebar 80% dari layar</div>

</body>
</html>

Hasilnya:

css-height-width-example

Kesimpulan

Dengan CSS width dan height, kamu bisa:

Mengatur ukuran elemen secara tepat
Membuat layout jadi konsisten
Mengatur responsivitas elemen