Visualizer Model Kotak

Alat ini memaparkan box model CSS sebagai rajah berwarna bersarang (margin, border, padding, content) dan mengemas kini kedua-dua visual serta CSS yang dijana semasa anda menukar nilai setiap sisi. Setiap margin/border/padding mempunyai input bebas untuk atas/kanan/bawah/kiri dalam piksel, dan kotak content mempunyai lebar dan tinggi. Mengklik kad lapisan menyerlahkannya dengan cincin, dan jumlah saiz yang dipaparkan dikira serta dipaparkan.

1. Sunting nilai Margin, Border, dan Padding setiap sisi (dalam px) dalam kad berkumpulan mereka. 2. Tetapkan lebar dan tinggi Content. 3. Klik mana-mana kad lapisan untuk menyerlahkan lapisan itu dalam rajah. 4. Rajah bersarang menunjukkan dimensi luar jumlah, dan kotak CSS yang dijana dikemas kini secara langsung. 5. Klik Salin pada kad Kod CSS untuk menyalin perisytiharan yang dijana.

Output menggunakan singkatan `top right bottom left` untuk `margin`, `border-width` (dengan `border-style: solid;`), dan `padding`, serta `width` dan `height` eksplisit, dan komen yang menunjukkan jumlah saiz luar. Jumlah lebar = margin kiri + border kiri + padding kiri + lebar content + padding kanan + border kanan + margin kanan (tinggi secara analogi). Rajah diskalakan untuk muat, dengan saiz content minimum 60x30 px supaya kotak kecil tetap kelihatan.