CSS Units

CSS menggunakan berbagai jenis satuan untuk mengatur ukuran elemen. Satuan ini terbagi menjadi dua kategori utama:

1. Satuan Absolut

Satuan tetap, tidak tergantung ukuran layar:

• cm – centimeter
• mm – millimeter
• in – inches (1in = 96px = 2.54cm)
• px – pixels (1px = 1/96th of 1in)
• pt – points (1pt = 1/72 of 1in)
• pc – picas (1pc = 12 pt)

2. Satuan Relatif

Tergantung konteks dan ukuran elemen lain:

• % – relatif terhadap elemen induk
• em – relatif terhadap ukuran font elemen induk
• rem – relatif terhadap ukuran font elemen html
• vw – 1% dari lebar viewport
• vh – 1% dari tinggi viewport
• vmin – 1% dari nilai lebih kecil antara vw dan vh
• vmax – 1% dari nilai lebih besar antara vw dan vh

Contoh Penggunaan Berbagai Satuan

<style>
  .box-px {
    width: 200px;
    height: 100px;
    background-color: lightblue;
  }
 
  .box-percent {
    width: 50%;
    height: 50px;
    background-color: lightgreen;
  }
 
  .box-em {
    font-size: 2em;
    background-color: lightcoral;
    padding: 1em;
  }
 
  .box-rem {
    font-size: 1.5rem;
    background-color: lightgoldenrodyellow;
    padding: 1rem;
  }
 
  .box-vw {
    width: 50vw;
    height: 50px;
    background-color: lightpink;
  }
 
  .box-vh {
    height: 20vh;
    background-color: lightgray;
  }
</style>
 
<div class="box-px">200px</div>
<div class="box-percent">50%</div>
<div class="box-em">2em</div>
<div class="box-rem">1.5rem</div>
<div class="box-vw">50vw</div>
<div class="box-vh">20vh</div>

Ringkasan

• Gunakan px untuk ukuran tetap.
• Gunakan %, em, rem, vw, vh untuk desain yang responsif.
• Gunakan rem untuk ukuran font yang konsisten di seluruh halaman.