Percentages

Nilai persentase terlihat sederhana — 50% berarti setengah — tetapi pertanyaan pentingnya adalah “setengah dari apa”. Jawabannya bergantung pada properti yang memakai nilai tersebut: width merujuk ke lebar containing block, font-size merujuk ke font-size induk, sementara padding justru selalu merujuk ke lebar containing block, termasuk untuk padding atas dan bawah. Karena rujukannya berbeda-beda, persentase adalah sumber kebingungan klasik sekaligus alat layout yang sangat lentur. Chapter ini memetakan rujukan per rujukan, lalu membuktikannya dengan demo yang diuji otomatis.

Persentase Selalu Merujuk ke Sesuatu #

Tabel berikut merangkum rujukan nilai persentase untuk properti yang paling sering dipakai:

Dua baris di tabel ini paling sering mengejutkan pemula. Pertama, height: 50% hanya bekerja bila tinggi elemen induk didefinisikan secara pasti; bila tinggi induk ditentukan oleh isinya, browser tidak memiliki angka untuk dirujuk dan nilai tersebut diperlakukan sebagai auto. Kedua, padding-top: 10% dihitung dari lebar induk, bukan dari tingginya — perilaku ini konsisten dengan penjelasan MDN: percentage dan berlaku seragam untuk keempat sisi.

Persentase juga bekerja pada margin dengan rujukan yang sama: margin-left: 10% di dalam arena 400px menghasilkan 40px. Sementara itu, font-size: 150% berperilaku mirip em — ia mengikuti font-size induk, bukan lebar apa pun, sehingga nilai 150% pada induk 16px menghasilkan 24px.

Demo: width, height, dan padding dalam Persen #

Demo berikut memakai arena tetap berukuran 400×200px sebagai containing block:

.arena {
  width: 400px;
  height: 200px;
}
.kolom {
  width: 50%;
  height: 50%;
}
.kotak {
  width: 40%;
  padding-left: 10%;
  padding-top: 10%;
}

Mari kita telaah baris demi baris:

1. Baris 1–4 (.arena): arena diberi ukuran pasti 400×200px agar persentase di dalamnya memiliki rujukan yang jelas.
2. Baris 5–8 (.kolom): width: 50% menghasilkan 200px (setengah dari 400px) dan height: 50% menghasilkan 100px (setengah dari 200px) — keduanya valid karena tinggi arena pasti.
3. Baris 9–13 (.kotak): width: 40% menghasilkan 160px. Padding kiri dan padding atas sama-sama ditulis 10%, dan keduanya dihitung dari lebar arena 400px, sehingga nilainya 40px.

Hasil di Browser:

Di dalam arena 400×200px: kolom tampil berukuran 200×100px
(50% dari lebar dan tinggi arena).
Kotak tampil selebar 160px dengan padding-left 40px dan
padding-top 40px — keduanya 10% dari lebar arena 400px,
bukan dari tingginya.
Teks dengan font-size 150% tampil berukuran 24px
(150% dari font-size induk 16px).

Seluruh angka di atas terverifikasi otomatis: elemen demo membawa penanda data-expected yang memeriksa width, height, padding-left, padding-top, dan font-size melalui nilai computed di headless browser. Ketika kita mengubah lebar arena pada demo, semua nilai persentase ikut bergerak — inilah sifat lentur yang menjadikan persentase fondasi layout responsif sebelum kita mengenal satuan lain.

Sebagai catatan sejarah singkat, sifat “padding merujuk lebar” dulu dimanfaatkan untuk membuat kotak berperbandingan tetap lewat padding-top: 100%; kini properti aspect-ratio menawarkan cara yang lebih lugas untuk keperluan yang sama.