Satuan px, rem, persen, dan box-sizing

Ukuran huruf elemen root pada browser desktop umumnya 16 piksel, sehingga 1rem setara 16px dan 1.5rem setara 24px. Angka itu ikut berubah kalau pembaca memperbesar ukuran huruf di pengaturan browser, dan itulah alasan rem dipakai untuk jarak yang harus ikut membesar.

Satuan persen selalu mengacu pada ukuran elemen induk, jadi hasilnya berubah begitu induknya berubah. Nilai width: 50% di dalam kotak selebar 600 piksel menghasilkan 300 piksel; kotak yang sama di dalam induk selebar 320 piksel menghasilkan 160 piksel. Padding dan margin dalam persen mengacu pada lebar induk, termasuk padding-top dan padding-bottom.

Secara bawaan, properti width hanya mengatur lebar area isi: padding dan border ditambahkan di luarnya. MDN mencatat nilai box-sizing: border-box mengubah perilaku itu sehingga padding dan border dihitung ke dalam width.

* { box-sizing: border-box; }

.kartu {
  width: 300px;   /* lebar total tetap 300px */
  padding: 20px;  /* dihitung ke dalam 300px */
  border: 5px solid #7051c4;
}