Skip to content

Latest commit

 

History

History
123 lines (84 loc) · 1.8 KB

README.md

File metadata and controls

123 lines (84 loc) · 1.8 KB

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.


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.


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.


min-height

div {
  min-height: 200px;
}

Cara kerja

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