CSS Height, Width and Max-width

CSS menyediakan properti untuk mengatur dimensi elemen, seperti tinggi (height), lebar (width), dan lebar maksimum (max-width). Properti-properti ini berguna untuk memberikan kontrol yang lebih baik terhadap layout halaman web.

1. Mengatur Tinggi dan Lebar Elemen

Dengan properti height dan width, Anda dapat mengatur tinggi dan lebar elemen secara eksplisit.

div {
  height: 200px;
  width: 300px;
  background-color: #4CAF50;
}

2. Mengatur Max-width

Properti max-width digunakan untuk membatasi lebar elemen agar tidak melebihi nilai tertentu, meskipun elemen tersebut mungkin memiliki lebar lebih besar.

div {
  max-width: 500px;
  width: 100%;
  background-color: #ff5722;
}

3. Menggunakan Persentase untuk Width dan Height

Nilai untuk width dan height bisa menggunakan persentase, yang dihitung berdasarkan ukuran elemen induk.

div {
  width: 50%;
  height: 200px;
  background-color: #2196F3;
}

4. Menggunakan Auto untuk Width dan Height

Properti auto digunakan untuk memungkinkan elemen menyesuaikan ukurannya secara otomatis berdasarkan kontennya.

div {
  width: auto;
  height: 100px;
  background-color: #9C27B0;
}

5. Menggunakan Viewport untuk Width dan Height

Anda juga dapat menggunakan unit viewport (vw untuk lebar dan vh untuk tinggi) untuk menetapkan dimensi elemen relatif terhadap ukuran layar.

div {
  width: 50vw;
  height: 50vh;
  background-color: #673ab7;
}

6. Menentukan Height dan Width dengan Max-width dan Max-height

Menggabungkan max-width dengan max-height memungkinkan Anda membatasi dimensi elemen pada nilai maksimum tertentu, meskipun elemen tersebut memiliki dimensi yang lebih besar.

div {
  max-width: 400px;
  max-height: 300px;
  width: 100%;
  height: 100%;
  background-color: #00bcd4;
}

Ringkasan Properti CSS Height, Width, dan Max-width