Debugging Box Model

Sepanjang section ini kita menemui berbagai gejala: elemen lebih lebar dari yang ditulis, jarak vertikal lebih kecil dari perhitungan, latar panel yang tidak menutupi judulnya. Semua gejala itu bisa dilacak ke satu tempat yang sama — diagram box model di DevTools, yang menampilkan angka nyata keempat lapis pada elemen yang sedang diperiksa. Chapter ini merangkum alur kerjanya: membaca diagram, mencocokkannya dengan gejala yang paling sering muncul, mengedit nilai secara langsung, dan menutupnya dengan checklist yang bisa dipakai pada proyek mana pun.

Diagram Box Model di DevTools #

Alurnya: klik kanan elemen pada halaman, pilih Inspect, lalu pada panel Elements buka tab Computed — diagram box model berada di sana (di Firefox pada tab Layout). Diagram menggambar keempat lapis dengan skema warna yang konsisten antar browser: biru untuk content, hijau untuk padding, kuning untuk border, dan oranye untuk margin. Setiap lapisan mencantumkan angka terhitung, bukan angka yang kita tulis:

margin             24        (oranye)
┌────────────────────────────┐
│ border                  4  │ (kuning)
│  ┌──────────────────────┐  │
│  │ padding           16 │  │ (hijau)
│  │    content  240 × 54   │  (biru)
│  └──────────────────────┘  │
└────────────────────────────┘

Menempatkan kursor pada salah satu lapisan menyorot area yang sesuai langsung di halaman — cara cepat memastikan ruang mana yang terlihat mencurigakan. Perlu diingat, nilai pada tab Computed sudah dihitung: padding: 1.5em pada font 20px tampil sebagai 30px, dan box-sizing yang aktif bisa dicek pada daftar di bawah diagram.

Empat Gejala Klasik #

Hampir semua keluhan kotak jatuh ke empat pola berikut. Tabel ini memetakan gejala ke penyebab dan lapisan yang perlu diperiksa:

Gejala kelima yang turut sering: latar induk tidak menutupi ruang di atas kontennya — periksa margin-top anak pertama dan apakah induk punya padding atau border pemisah, sesuai chapter Margin Collapse.

Gejala pertama layak ditelusuri sampai selesai karena paling sering muncul. DevTools berjalan di browser kita, bukan di dalam iframe demo, jadi demo berikut bertugas sebagai bukti visual kotak yang “wajib” meluap. Hitungannya:

width yang ditulis  : 320px
+ padding  2 × 20px :  40px
+ border   2 × 4px  :   8px
= kotak terlihat    : 368px  → melebihi wadah 320px sebesar 48px

Demo memakai reset="false" agar default content-box browser yang terasa:

Untuk melihat diagramnya, salin pola markup dan CSS di atas ke berkas HTML sendiri, buka di browser, lalu jalankan alur Inspect → Computed pada kartu tersebut — diagram akan menampilkan content 320px, padding 20, dan border 4.

Perbaikannya sesuai pola chapter Content-Box dan Border-Box: bila lebar kartu memang harus mengikuti wadah, hapus width yang tetap dan biarkan elemen block memenuhi ruang yang tersedia, atau pastikan reset border-box berlaku:

/* perbaikan: lebar mengikuti wadah, padding menyesuaikan ke dalam */
.kartu-laporan {
  padding: 20px;
  border: 4px solid #1f6f54;
  /* width dihapus — elemen block mengisi wadah tanpa meluap */
}

Mengedit Nilai Secara Langsung #

Angka pada diagram bisa diklik dua kali lalu diedit langsung — tambahkan 8px pada padding, nolkan satu margin, atau ubah nilai box-sizing dari daftar di panel Computed. Hasilnya tampak seketika pada halaman tanpa menyentuh berkas CSS. Nilai yang diubah bersifat sementara dan hilang saat halaman dimuat ulang, jadi alurnya: uji angka di DevTools, lalu salin kombinasi yang terbukti ke stylesheet. Cara ini jauh lebih cepat daripada menebak-nebak angka di editor lalu memuat ulang halaman berulang kali.

Checklist Debugging Kotak #

Saat menghadapi layout yang tidak sesuai harapan, jalankan urutan berikut:

1. Klik kanan elemen bermasalah, pilih Inspect, pastikan elemen yang terpilih tepat (bukan induk atau anaknya).
2. Buka tab Computed dan baca diagram box model — bandingkan angkanya dengan angka yang ditulis di stylesheet pada panel Styles.
3. Cocokkan box-sizing sebelum menyimpulkan ukuran salah; angka width berbeda makna di dua mode.
4. Periksa lapis oranye dan hijau untuk masalah jarak: margin yang mencollapse atau padding yang hilang.
5. Uji perbaikan dengan mengedit angka di diagram, lalu salin hasilnya ke stylesheet setelah cocok.

Ringkasan #

Diagram box model di panel Computed DevTools menampilkan angka nyata keempat lapis dengan kode warna konsisten, menyorot area pada halaman saat dihover, dan menerima suntingan langsung untuk uji cepat. Empat gejala klasik — elemen terlalu lebar, jarak menyusut, konten menempel tepi, elemen terpusat bergeser — masing-masing dapat dilacak ke lapisan tertentu pada diagram itu. Dengan kotak yang kini bisa diukur, dibentuk, diberi kedalaman, dan di-debug, section Box Model selesai; section berikutnya, Warna, Background, dan Borders, menghiasi kotak-kotak tersebut dengan warna dan latar.