Lebar dan Tinggi width dan height

Lebar (width) dan Tinggi (height) adalah dua properti penting dalam CSS yang digunakan untuk mengontrol dimensi elemen HTML. Dengan mengatur nilai lebar dan tinggi, Anda dapat mengatur seberapa besar atau tingginya suatu elemen akan ditampilkan di halaman web Anda.

Mengatur Lebar (width)

Anda dapat mengatur lebar elemen dengan menggunakan properti CSS width. Berikut contoh penggunaannya:

.element {
  width: 200px; /* Mengatur lebar elemen menjadi 200 piksel */
}

Anda juga dapat menggunakan persentase untuk mengatur lebar relatif terhadap parent elemen:

.element {
  width: 50%; /* Mengatur lebar elemen menjadi 50% dari lebar parent */
}

Mengatur Tinggi (height)

Untuk mengatur tinggi elemen, Anda menggunakan properti CSS height. Contoh penggunaannya adalah sebagai berikut:

.element {
  height: 100px; /* Mengatur tinggi elemen menjadi 100 piksel */
}

Seperti halnya dengan lebar, Anda juga bisa menggunakan persentase untuk mengatur tinggi relatif terhadap parent elemen:

.element {
  height: 50%; /* Mengatur tinggi elemen menjadi 50% dari tinggi parent */
}

Mengatur Lebar dan Tinggi Bersamaan

Jika Anda ingin mengatur baik lebar maupun tinggi sekaligus, Anda dapat menggunakan properti width dan height dalam satu deklarasi:

.element {
  width: 200px;
  height: 100px;
}

Kesimpulan

Menggunakan properti CSS width dan height memungkinkan Anda untuk mengontrol dimensi elemen HTML sesuai kebutuhan desain Anda. Anda dapat mengatur dimensi elemen tersebut dalam piksel atau persentase, tergantung pada tuntutan desain dan layout halaman web Anda. Semoga tutorial ini bermanfaat!

PREVIOUS
NEXT