Box Model Debugging

Sebuah kotak tidak jarang tampil tidak sesuai harapan: lebarnya melebihi rak penampungnya, jaraknya terasa aneh, atau ukurannya berubah setelah padding ditambah. Alih-alih menebak-nebak, kita dapat memeriksa kotak tersebut langsung melalui DevTools yang tersedia di seluruh browser modern. Panel Computed menampilkan nilai akhir setiap properti CSS, lengkap dengan diagram box model yang memvisualkan content, padding, border, dan margin elemen terpilih. Chapter ini menyusun alur diagnosis yang dapat diulang, ditambah teknik outline sementara yang membantu melihat batas kotak tanpa mengubah tata letak.

Alur Diagnosis di DevTools #

1. Buka elemen terpilih: klik kanan elemen yang bermasalah, pilih Inspect — atau tekan Ctrl+Shift+C (Cmd+Option+C di macOS). Panel Elements membuka DOM dengan elemen tersebut terpilih.
2. Buka panel Computed: cari panel bernama Computed, lalu gunakan kotak pencariannya untuk melompat ke properti tertentu, misalnya width.
3. Selidiki diagram box model: di bagian atas panel Computed, arahkan kursor ke diagram berlapis. Setiap area — margin, border, padding, konten — menampilkan angka pikselnya, dan area yang tersorak ikut disorot di halaman.
4. Bandingkan nilai computed dengan deklarasi: bila computed width berbeda dari angka yang Anda tulis, cari di panel Styles aturan lain yang ikut berlaku; deklarasi yang kalah seleksi tampil dengan garis coretan.
5. Uji perbaikan secara langsung: ubah nilai di panel Styles — misalnya ganti box-sizing — lalu amati hasilnya. Setelah angkanya cocok, salin perubahan ke berkas CSS proyek.

Urutan ini bekerja untuk hampir semua keluhan layout, karena diagram box model menjawab tiga pertanyaan kunci sekaligus: seberapa besar tiap lapisan, dari mana asal nilainya, dan apakah ada deklarasi lain yang menimpa.

Perlu diingat bahwa panel Computed menampilkan nilai akhir setelah cascade dan inheritance selesai diproses — bukan sekadar deklarasi yang kita tulis. Properti yang diwariskan, seperti color, ikut tampil di sana dengan keterangan asalnya (“inherited from …”) ketika nilainya berasal dari induk. Bila nilai computed terasa janggal, langkah berikutnya adalah membuka panel Styles untuk melihat rantai aturan yang menghasilkannya.

Teknik Outline Sementara #

Selain DevTools, kita dapat menandai batas kotak langsung dari CSS menggunakan outline :

.sorot {
  outline: 2px solid rgb(220, 38, 38);
  outline-offset: 2px;
}

Outline digambar di luar border dan tidak memengaruhi tata letak: tidak menambah ukuran kotak, tidak menggeser tetangga, dan tidak mengurangi area konten. Perilaku ini berbeda dari border, yang selalu mengambil ruang. Properti outline-offset menambah jarak antara garis dengan kotaknya sehingga garis tidak menutupi detail tepi. Kombinasi tersebut menjadikan outline alat penanda yang aman dipasang sementara saat menyusun grid atau mencari kotak yang meluber.

Hasil di Browser:

Kartu bermasalah dengan width 240px, padding 20px, dan border 4px pada
mode content-box meluber dari rak selebar 240px; outline merah 2px
(computed outline-width: 2px, outline-style: solid) menandai batasnya
tanpa mengubah layout. Setelah box-sizing diubah ke border-box, kartu
perbaikan menempati tepat 240px (computed width: 240px) dan muat di
dalam rak; penandanya memakai outline-style: dashed dengan ketebalan
sama (computed outline-width: 2px).

Demo chapter ini menampilkan kedua kartu tersebut di dalam rak selebar 240px:

<div class="rak">
  <div class="kartu-masalah sorot-merah">content-box — meluber</div>
</div>
<div class="rak">
  <div class="kartu-beres sorot-biru">border-box — muat</div>
</div>

Kasus Lazim dan Perbaikannya #

Empat kasus di atas adalah penyebab tersering keluhan box model, dan keempatnya dapat didiagnosis dengan alur lima langkah di awal chapter ini. Setelah penyebab ditemukan di panel Computed, perbaikannya biasanya hanya satu deklarasi.