html-css

CSS SIZE

Apa itu CSS size?

CSS size adalah property CSS yang digunakan untuk mengatur ukuran pada suatu element

Ada beberapa property size yaitu

• width
• height
• max-width
• min-width
• max-height
• min-height

Langsung ke kodenya

---

width

div {
  /* Penjelasan */
  /* property width : digunakan untuk mengatur lebar */
  /* Satuan yang biasa digunakan px atau % */
  width: 100px;
}

Contoh memakai persentase (%)

div {
  width: 100%;
}

---

height

div {
  /* Penjelasan */
  /* Property height : digunakan untuk mengatur tinggi  */
  /* Satuan yang biasa digunakan px atau % */
  height: 50px;
}

Contoh memakai persentase (%)

div {
  height: 50%;
}

---

max-width

div {
  max-width: 200px;
}

Cara Kerja

Jadi ketika layar lebih dari besar 200px maka, element di dalamnya akan secara otomatis mengubah tinggi element.

Referensi https://www.w3schools.com/css/css_max-width.asp

---

min-width

div {
  min-width: 500px;
}

Cara kerja

Jadi ketika layar kurang dari 500px maka, element di dalamnya akan menyesuaikan ke bawah. Jika lebih dari 500px, makamin-width tidak bekerja.

Referensi https://www.w3schools.com/cssref/pr_dim_min-width.asp

---

max-height

div {
  max-height: 60px;
}

Cara kerja

Jadi ketika konten/element lebih besar dari 60px, maka element/konten akan menyesuaikan layarnya. biasanya property ini digunakan bersama dengan property overflow agar terlihat lebih bagus.

Referensi https://www.w3schools.com/cssref/pr_dim_max-height.asp

---

min-height

div {
  min-height: 200px;
}

Cara kerja

Jadi ketika element lebih kecil dari 200px, maka element akan menyesuaikan ke bawah.

Referensi https://www.w3schools.com/cssref/pr_dim_min-height.asp

This site is open source. Improve this page.