CSS Width dan Height

CSS Width dan Height adalah dua properti penting dalam CSS Box Model yang berfungsi untuk menentukan lebar dan tinggi area konten suatu elemen. Properti ini memengaruhi ukuran dasar elemen dan dapat membantu mengontrol tampilan elemen di halaman web.

Fungsi Width dan Height

Properti width dan height mengatur dimensi area konten di dalam elemen. Dalam Box Model, ukuran area konten akan ditambahkan dengan padding, border, dan margin untuk mendapatkan ukuran total elemen.

Penggunaan Width

Properti width mengatur lebar area konten dalam suatu elemen:

div {
  width: 200px;
}

Dengan width: 200px;, elemen div akan memiliki lebar konten sebesar 200 piksel.

Penggunaan Height

Properti height mengatur tinggi area konten dalam suatu elemen:

div {
  height: 100px;
}

Dengan height: 100px;, elemen div akan memiliki tinggi konten sebesar 100 piksel.

Pengaturan Width dan Height dalam Persentase

Kedua properti ini juga dapat diatur dalam satuan persentase (%), yang membuat lebar dan tinggi elemen bersifat responsif sesuai ukuran elemen induknya. Contoh:

div {
  width: 50%;
  height: 50%;
}

Pengaturan di atas akan membuat elemen div memiliki lebar dan tinggi yang setengah dari ukuran elemen induknya.

Auto dan Nilai Default Width dan Height

Secara default, nilai width dan height elemen adalah auto. Ini berarti elemen akan menyesuaikan ukurannya dengan konten yang ada di dalamnya. Sebagai contoh, jika elemen berisi teks atau gambar, ukuran elemen akan menyesuaikan sesuai ukuran konten tersebut.

Box-Sizing dan Width/Height

Properti box-sizing memengaruhi cara width dan height dihitung. Jika box-sizing disetel ke border-box, padding dan border akan dihitung di dalam width dan height:

div {
  width: 200px;
  height: 100px;
  padding: 20px;
  box-sizing: border-box;
}

Dengan pengaturan ini, elemen akan tetap memiliki ukuran 200px x 100px secara total, termasuk padding dan border di dalamnya.

Kesimpulan

CSS Width dan Height adalah dua properti penting dalam pengaturan ukuran elemen di halaman web. Menguasai penggunaannya dapat membantu kita dalam membuat tata letak yang lebih rapi dan responsif. Dengan box-sizing, kita juga bisa mengontrol apakah padding dan border ikut terhitung dalam ukuran elemen atau tidak.