Height dan Width CSS

Properti height dan width CSS digunakan untuk mengatur tinggi dan lebar elemen.

Properti max-width CSS digunakan untuk mengatur lebar maksimum sebuah elemen.

Pengaturan height dan width CSS

Properti height dan width digunakan untuk mengatur tinggi dan lebar elemen.

Properti height dan width tidak termasuk padding, border, atau margin. Ini mengatur tinggi / lebar area di dalam padding, border, dan margin elemen.

Nilai height dan width CSS

Properti height dan width mungkin memiliki nilai berikut:

• auto - Ini secara default. Browser menghitung tinggi dan lebar
• length - Mendefinisikan tinggi / lebar dalam px, cm dll.
• % - Mendefinisikan tinggi / lebar dalam persen dari blok berisi
• initial - mengatur tinggi / lebar ke nilai default-nya
• inherit - Tinggi / lebar akan diwarisi dari nilai induknya

Contoh

Mengatur tinggi dan lebar elemen <div>:

div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}

Contoh

Mengatur tinggi dan lebar elemen <div> lainnya:

div {
  height: 100px;
  width: 500px;
  background-color: powderblue;
}

Catatan: Ingatlah bahwa properti height dan width tidak menyertakan padding, border, atau margin. Mereka mengatur tinggi/lebar area di dalam padding, border, dan margin elemen.

Pengaturan max-width

Properti max-width digunakan untuk mengatur lebar maksimum dari suatu elemen.

Properti max-width dapat ditentukan dalam nilai-nilai panjang, seperti px, cm, dll, atau dalam persen (%) dari blok yang ada, atau set ke none (ini adalah default. Berarti bahwa tidak ada lebar maksimum).

Masalah tag <div> di atas terjadi ketika jendela browser lebih kecil dari lebar elemen (500px). Browser kemudian menambahkan scrollbar horizontal ke halaman.

Jadi gunakan max-width, dalam situasi ini, browser akan meningkatkan penanganan dari ukuran jendela (layar) yang kecil.

Tips: Coba drag (seret) jendela browser menjadi lebih kecil dari lebar 500px, untuk melihat perbedaan antara kedua div.

Catatan: Jika Anda karena alasan tertentu menggunakan properti width dan max-width pada elemen yang sama, dan nilai dari properti width lebih besar dari properti max-width; properti max-width akan lebih digunakan dan properti width akan diabaikan.

Contoh

Elemen <div> ini memiliki tinggi 100 piksel dan lebar maksimal 500 piksel:

div {
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}

Sumber referensi: w3schools.com