| Satuan | Acuan | Contoh pemakaian |
|---|---|---|
| px | Satu piksel CSS, ukuran tetap | border: 1px |
| rem | Ukuran huruf elemen root (html) | padding: 1.5rem |
| % | Ukuran elemen induknya | width: 100% |
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.
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;
}