Debugging Box Model dengan DevTools

Ketika sebuah kotak tampil lebih lebar, lebih sempit, atau bergeser dari rencana, menebak-nebak angka di stylesheet jarang menyelesaikan masalah dengan cepat. DevTools memberi kita jalan yang lebih langsung: diagram box model yang menampilkan angka nyata keempat lapis, lengkap dengan kemampuan menyorot dan menyunting langsung di halaman. Chapter Debugging Box Model pada section Box Model sudah memperkenalkan diagram tersebut; chapter ini mengonsolidasikannya menjadi alur kerja penuh, menambahkan trik outline semua elemen untuk memetakan halaman, dan menutupnya dengan resep diagnosis untuk tiga keluhan yang paling sering kita temui.

Panel Layout dan Diagram Box Model #

Nama tabnya berbeda antar browser, tetapi isinya sama. Diagram box model berada di tab Computed pada Chrome dan Edge, sementara Firefox meletakkannya di tab Layout — nama inilah yang menjadi judul chapter ini. Panel Layout pada Chrome punya peran lain yang akan kita pakai pada dua chapter berikutnya: menampung pengaturan overlay grid dan flexbox.

Alur kerja penuhnya dapat dirangkum empat langkah:

1. Klik kanan elemen bermasalah → pilih Inspect
2. Buka tab Computed (Chrome) atau Layout (Firefox) → diagram box model
3. Arahkan kursor ke satu lapisan → area terkait tersorot di halaman
4. Klik dua kali angka → sunting langsung → uji → salin ke stylesheet

Tiga detail pada diagram itu penting untuk diingat. Pertama, angka yang tampil adalah angka terhitung: padding: 1.5em pada font 20px tampil sebagai 30, bukan tulisan aslinya. Kedua, mengarahkan kursor ke lapis oranye (margin) atau hijau (padding) menyorot ruang tersebut di halaman — cara tercepat memastikan ruang mana yang terasa mencurigakan. Ketiga, setiap angka dapat diklik dua kali dan disunting; hasilnya tampak seketika, bersifat sementara, dan hilang saat halaman dimuat ulang. Uji angka di DevTools, lalu salin kombinasi yang terbukti ke stylesheet.

Trik Outline Semua Elemen #

Kadang masalahnya bukan satu kotak, tetapi tumpukan kotak yang saling menekan. Untuk situasi ini, kita bisa menggambar peta seluruh kotak pada halaman sekaligus:

/* Tempel sementara pada rule html di panel Styles */
* {
  outline: 1px solid #ef4444;
}

Demo berikut menjalankan trik itu pada halaman mini — heading, paragraf, list item, sampai div kosong:

Trik ini aman karena outline tidak memakan ruang layout, berbeda dengan border yang menambah ketebalan dan justru mengubah perhitungan yang sedang kita periksa.

DevTools juga menyediakan versi resmi dari trik ini untuk layout modern: badge grid dan flex pada panel Elements, dengan overlay berwarna yang diatur dari panel Layout. Overlay itu lebih informatif daripada outline merah dan akan dibahas tuntas pada chapter debugging grid dan flexbox. Setelah selesai memakai outline, hapus rule-nya — rule sementara di panel Styles ikut hilang saat halaman dimuat ulang.

Tiga Resep Diagnosis #

Hampir semua keluhan kotak jatuh ke tiga pola berikut. Tabel ini memetakan gejala, langkah pemeriksaan di DevTools, dan perbaikan yang lazim:

Kasus ketiga adalah teka-teki margin yang paling sering ditanyakan: margin anak pertama seolah-olah tidak berada di dalam induk. Penjelasannya adalah margin collapse — margin anak menembus tepi induk yang tidak punya padding, border, maupun formatting context sendiri. Perbaikan paling bersih membentuk BFC (block formatting context) pada induk:

.wadah-laporan {
  display: flow-root; /* membentuk BFC: margin anak dihitung di dalam induk */
}

Nilai overflow selain visible juga membentuk BFC, tetapi efek sampingnya memotong konten atau membuat scroll container, jadi flow-root adalah pilihan yang lebih bersih. Detail mekanismenya sudah dibahas pada chapter Margin Collapse.

Demo berikut sengaja menghidupkan dua kejanggalan sekaligus. Demo memakai reset="false" agar box-sizing bawaan browser (content-box) benar-benar terasa:

Inilah yang akan kita baca di DevTools untuk masing-masing kejanggalan:

1. Kartu meluap. Diagram box model kartu menampilkan content 280, padding 20 di keempat sisi, dan border 4 — dengan box-sizing: content-box, total kotak terlihat menjadi 328px, sementara ruang dalam wadah hanya sekitar 316px. Lapis margin 16 di kiri membuat kotak kehabisan ruang kanan.
2. Jarak menyusut. Menghover lapis oranye pada Catatan A dan Catatan B menyorot ruang yang sama di halaman: dua margin 24px bertemu dan mencollapse menjadi satu ruang 24px, bukan 48px.

Perbaikan keduanya pendek:

/* Perbaikan 1: kotak mengikuti wadah, padding dihitung ke dalam */
.kartu-statistik {
  box-sizing: border-box;
  width: 100%;
  margin: 16px;
  padding: 20px;
  border: 4px solid #1f6f54;
}

/* Perbaikan 2: spasi antar catatan ditanggung satu sisi saja */
.catatan-atas {
  margin: 24px 16px 0;
}
.catatan-bawah {
  margin: 0 16px 16px;
}

Untuk membuktikan diagnosisnya, salin markup dan CSS demo ke berkas HTML sendiri, buka di browser, lalu jalankan alur Inspect → tab Computed/Layout pada kartu dan kedua catatan — diagram akan menampilkan angka persis seperti uraian di atas.

Ringkasan #

Debugging box model berjalan paling cepat dengan alur empat langkah: Inspect, buka diagram di tab Computed/Layout, sorot lapisan untuk menemukan ruang yang bersangkutan, lalu sunting angka langsung sebelum menyalin hasilnya ke stylesheet. Trik outline pada semua elemen memetakan seluruh kotak halaman tanpa mengubah layout, sementara tiga resep diagnosis — lebar melebihi wadah, jarak menyusut karena margin collapse, dan margin anak yang menembus induk — mencakup sebagian besar keluhan kotak. Kotak kini bisa kita periksa dengan lengkap; berikutnya kita naik ke penyusunan satu dimensi dan melihat bagaimana DevTools memvisualisasikan flexbox.