Skip to main content

B.4.2.1. Width Dan Height

Dalam desain web, mengatur ukuran elemen adalah salah satu hal dasar yang sangat penting. Properti width dan heightpada CSS memungkinkan temen-temen untuk mengontrol lebar dan tinggi elemen, baik itu kotak, gambar, atau elemen lainnya di halaman web.

Sintaks untuk menggunakan properti width dan height cukup sederhana:

selector {
  width: value;
  height: value;
}

Nilai dari width dan height bisa berupa panjang absolut (seperti piksel) atau relatif (seperti persen). Keduanya digunakan untuk menentukan seberapa besar elemen harus tampil di layar.

  • Piksel (px): Menentukan lebar atau tinggi elemen dalam satuan piksel. Misalnya, width: 200px; berarti lebar elemen adalah 200 piksel.
  • Persentase (%): Menentukan ukuran elemen relatif terhadap elemen induknya. Misalnya, width: 50%; berarti lebar elemen adalah 50% dari lebar elemen induk.
  • Otomatis (auto): Mengizinkan browser untuk menghitung ukuran elemen secara otomatis. Ini adalah nilai default untuk elemen block-level jika width tidak ditentukan.
  • Lainnya: Temen-temen juga bisa menggunakan unit lain seperti em, rem, vh, vw, dan lain-lain, tergantung kebutuhan. Apa ini? nanti kita bahas lebih detail pada chapter B.8. Responsive Design.

Cara menggunakan properti ini cukup mudah, coba temen-temen perhatikan kode di bawah ini:

<div class="kotak-1"></div>

Kita membuat sebuah <div> lalu kita atur lebarnya 100% dan tingginya menjadi 200px yang akan membuat <div> memenuhi lebar dari pembungkus atau parent element nya dan memiliki tinggi 200px, memiliki warna background aquamarine. Maka hasilnya akan terlihat:

Output

Nah kadang-kadang, temen-temen mungkin ingin menetapkan batasan minimum atau maksimum pada lebar dan tinggi elemen. Untuk itu, ada properti tambahan seperti min-width, max-width, min-height, dan max-height.

Sebagai contoh, coba kita modifikasi kode sebelumnya:

.kotak-1 {
  width: 50%;
  max-width: 500px;
  min-width: 200px;
  height: auto;
}

Pada kode di atas:

  • width: Lebar elemen ditetapkan sebesar 50% dari elemen induk.
  • max-width: Lebar maksimum elemen dibatasi hingga 500 piksel.
  • min-width: Lebar minimum elemen ditetapkan sebesar 200 piksel.
  • height: Tinggi elemen akan menyesuaikan secara otomatis berdasarkan konten.

Output dari kode di atas akan menampilkan blank putih, terlihat seperti tidak ada apa-apa tetapi sebenarnya <div> yang sudah di berikan style di atas sudah di terapkan dengan baik. Coba temen-temen tambahkan konten ke dalam <div> nya lalu beri properti background-color dengan nilai yang sama seperti sebelumnya. Apa itu background-color? kita akan bahas lebih detil pada chapter B.4.2.4. Backgrounds.

info

Source code pada chapter ini tersedia di GitHub
https://github.com/mframadann/webdev-dasar-example/tree/main/b-css/chapter-B.4-properti-css/B.4.2-box-styling/B.4.2.1-widh-dan-height