Gaya Terhitung dan Pemeriksa Model Kotak

Chrome DevTools → Elemen → tab Terhitung menampilkan nilai akhir yang dihitung dari setiap properti CSS pada elemen yang dipilih, setelah penyelesaian kaskade, pewarisan, dan spesifisitas. Panel ini menjawab “apa yang benar-benar diterapkan?”, bukan “apa yang ditulis?”.

Panel Terhitung menampilkan diagram model kotak interaktif yang menunjukkan dimensi konten, padding, border, dan margin untuk elemen yang dipilih. Klik dimensi apa pun untuk menyoroti aturan CSS yang menetapkannya dan berpindah ke panel Gaya.

Ketik di kotak filter untuk menemukan properti terhitung tertentu dengan cepat. Centang “Tampilkan semua” untuk menyertakan properti yang diwariskan dan properti bawaan peramban. Hapus centangnya untuk hanya menampilkan properti yang bukan bawaan—cara tercepat menemukan gaya yang relevan dan diterapkan.

Properti yang ditampilkan dalam warna abu-abu di panel Terhitung diwarisi dari elemen induk. Klik properti yang diwarisi untuk berpindah ke elemen dan aturan yang menetapkannya, sehingga Anda dapat menelusuri kaskade tanpa memeriksa induk secara manual di markah.

Penulisan margin: 16px 8px diperluas menjadi empat nilai terhitung: margin-top, margin-right, margin-bottom, margin-left. Panel Terhitung selalu menampilkan properti longhand secara terpisah—berguna untuk men-debug masalah jarak yang tidak simetris.

Nilai warna terhitung selalu menggunakan format rgb() atau rgba(), terlepas dari cara penulisannya. Klik contoh warna di panel Gaya untuk mengganti format tampilan (hex, hsl, rgb). Panel Terhitung selalu menampilkan warna yang telah diuraikan.

Periksa font-size, font-family, line-height, dan letter-spacing yang terhitung untuk memastikan token tipografi diterapkan dengan benar. Font pengganti peramban akan muncul dalam font-family terhitung ketika font yang diminta gagal dimuat.

box-sizing: border-box membuat width mencakup padding dan border; box-sizing: content-box (bawaan) tidak mencakupnya. Diagram model kotak di DevTools mencerminkan model yang berlaku—bandingkan lebar konten dengan lebar total untuk memastikan perilaku box-sizing.

Margin vertikal di antara elemen blok bergabung menjadi nilai yang lebih besar dari keduanya. Diagram model kotak menunjukkan margin efektif—gunakan bersama Layout Inspector untuk mengidentifikasi margin yang bergabung dan berbeda dari nilai yang ditulis.

Panel Gaya menampilkan semua aturan yang menargetkan elemen, diurutkan berdasarkan spesifisitas. Aturan yang dicoret telah ditimpa. Untuk menemukan aturan yang memenangkan perselisihan properti, cari deklarasi paling atas yang tidak dicoret di panel Gaya.

Aturan lembar gaya agen pengguna peramban muncul di bagian bawah panel Gaya dengan label “lembar gaya agen pengguna”. Panel Terhitung menampilkan nilai hasil resolusinya. Atur ulang nilai tersebut dengan reset CSS atau Normalize.css untuk menetapkan dasar yang konsisten di semua peramban.

Panel Gaya Terhitung dan diagram model kotak mengungkap nilai akhir yang telah diuraikan dari semua properti CSS setelah resolusi kaskade. Gunakan keduanya untuk menelusuri pewarisan, men-debug perluasan singkatan, menyelidiki box-sizing, dan mengidentifikasi aturan yang memenangkan konflik spesifisitas pada elemen mana pun.