CSS Kotak Model Visualisator

Cara menggunakan

1. Masukkan nilai box model: tentukan margin, border, padding, dan dimensi konten di kolom atau slider interaktif.
2. Jelajahi visualisasi: diagram klasik kotak bersarang diperbarui secara real-time, margin (oranye), border (kuning), padding (hijau), dan konten (biru), semua dengan label yang jelas.
3. Salin CSS: klik Salin CSS untuk mendapatkan properti lengkap box model elemen yang dikonfigurasi.

Mengapa menggunakan visualizer box model CSS?

Box model CSS adalah salah satu konsep paling fundamental dalam tata letak web, dan salah satu sumber bug yang paling umum, terutama saat mencampur nilai box-sizing, penggabungan margin, dan dimensi border. Visualizer interaktif ini membuat box model konkret dan nyata: Anda menyesuaikan nilai dan langsung melihat bagaimana margin, border, dan padding bertumpuk di sekitar konten. Penting untuk belajar, debug, dan mengajar CSS.

Fitur

• Diagram interaktif: tampilan klasik box model bersarang dengan lapisan berkode warna (margin, border, padding, konten).
• Toggle box-sizing: beralih antara content-box dan border-box untuk melihat bagaimana setiap mode memengaruhi dimensi total.
• Sisi individual: tetapkan nilai atas/kanan/bawah/kiri secara independen untuk margin, padding, dan border.
• Kalkulasi ukuran total: menampilkan lebar dan tinggi total elemen yang dihitung.
• Keluaran CSS: menghasilkan CSS yang siap pakai untuk box model yang dikonfigurasi.

Pertanyaan umum

Apa perbedaan antara content-box dan border-box?

Dengan content-box (default), width dan height hanya berlaku untuk area konten, padding dan border ditambahkan ke ukuran total elemen. Dengan border-box, width dan height termasuk padding dan border, membuat ukuran lebih dapat diprediksi. Kebanyakan reset CSS modern menerapkan box-sizing: border-box ke semua elemen.

Apa itu penggabungan margin?

Saat dua margin vertikal bersentuhan (antara elemen blok yang berdekatan atau antara induk dan anak pertama/terakhir), mereka digabungkan menjadi satu margin yang sama dengan nilai yang lebih besar. Ini tidak terjadi dengan anak flex atau grid, atau dengan elemen yang memiliki padding atau border.

Bagaimana cara menghapus ruang ekstra di bawah elemen inline?

Elemen inline (seperti <img>) memiliki sedikit ruang di bawahnya yang disebabkan oleh perataan baris dasar line-height. Perbaiki dengan menetapkan display: block pada elemen, atau vertical-align: bottom, atau font-size: 0 pada induk.

Apa yang sebenarnya didefinisikan oleh CSS box model

CSS box model adalah representasi persegi panjang dari setiap elemen pada halaman web. Setiap elemen memiliki empat kotak konsentris: kotak content (tempat teks, gambar, elemen anak tinggal), kotak padding (ruang antara konten dan border, di dalam batas yang terlihat), kotak border (garis luar yang terlihat digambar di sekitar padding), dan kotak margin (ruang transparan di luar border yang memisahkan elemen ini dari tetangganya). Ukuran terlihat total elemen adalah content + padding + border; margin tidak terlihat tetapi mendorong elemen lain menjauh.

Konsep kritisnya adalah box-sizing. Secara default (box-sizing: content-box, nilai spesifikasi CSS 1), properti width dan height berlaku hanya untuk kotak content. Jika Anda mengatur width: 200px; padding: 20px; border: 2px solid, lebar total yang dirender adalah 200 + 40 + 4 = 244 piksel. Ini tidak intuitif: elemen lebar 200px sebenarnya mengambil 244 piksel ruang horizontal. Alternatif box-sizing: border-box (ditambahkan dalam CSS 3) membalikkan ini: properti width adalah ukuran terlihat total termasuk padding dan border, sehingga area content menyusut untuk muat. border-box adalah apa yang diharapkan kebanyakan developer; ini menjadi standar de facto melalui reset CSS Paul Irish tahun 2012 * { box-sizing: border-box }.

Memahami box model itu penting karena bug layout hampir selalu berasal dari kebingungan tentang nilai mana berlaku untuk kotak mana. Mengapa elemen saya lebih lebar dari yang saya tetapkan? adalah kejutan content-box. Mengapa margin saya tidak mendorong saudaranya ke bawah? biasanya adalah penggabungan margin. Mengapa padding-top: 50% berperilaku aneh? karena padding persentase dihitung relatif terhadap lebar induk, bukan tinggi. Setiap developer CSS menghadapi kebingungan ini; visualizer ini membuatnya konkret dengan membiarkan Anda menyesuaikan nilai dan melihat geometri kotak yang dihasilkan secara real time.

Bagaimana alat ini bekerja di balik layar

Diagram interaktif adalah serangkaian div berwarna bersarang yang sesuai dengan setiap kotak (margin oranye, border kuning, padding hijau, content biru). Saat Anda mengubah nilai input, JavaScript memperbarui atribut style inline div diagram sehingga mereka mencerminkan nilai secara numerik dan visual. Proporsi diskalakan untuk muat di area pratinjau; nilai piksel absolut akan mendorong diagram keluar layar untuk input tipikal.

Perhitungan ukuran total tergantung pada mode box-sizing. Untuk content-box: lebar total = lebar content + padding-left + padding-right + border-left + border-right. Untuk border-box: lebar total = nilai width (padding dan border dikurangi dari area content). Alat ini menghitung kedua mode secara bersamaan saat Anda mengaktifkan box-sizing, sehingga Anda dapat membandingkan secara langsung.

Output CSS yang dihasilkan menggunakan input Anda sebagai nilai properti: box-sizing: border-box; width: 200px; padding: 10px 20px; border: 2px solid; margin: 1rem auto;. Salin ini langsung ke stylesheet Anda dan terapkan kelas yang sesuai. Tidak ada yang meninggalkan browser Anda; semuanya berjalan secara lokal dalam JavaScript. Tidak ada analitik, tidak ada backend, tidak ada akun. Muat ulang dan statusnya hilang.

Sejarah singkat CSS box model

• CSS 1 menentukan content-box, 1996.Rekomendasi CSS 1 (Desember 1996) mendefinisikan box model W3C: width berlaku untuk konten saja, padding dan border menambah ukuran total. Ini menjadi standar, tetapi Internet Explorer 4 dan 5 menerapkan model alternatif di mana width termasuk padding dan border (mirip dengan border-box saat ini).
• Mode quirks IE dan Perang Box Model, 1997 hingga 2001.IE 4 (1997) dan IE 5 dirilis dengan box model non-standar mereka; IE 6 (2001) memperkenalkan mode standar yang dipicu oleh deklarasi doctype yang beralih ke box model W3C. Perbedaan ini menciptakan tahun-tahun bug layout cross-browser dan pengetahuan mode quirks vs mode standar yang harus dipelajari setiap developer web hingga 2010.
• Reset CSS dan stylesheet klasik Eric Meyer, 2007.Eric Meyer menerbitkan reset CSS kanonis (Mei 2007) yang mengatur margin, padding, dan default lainnya ke nol di semua elemen. Menjadi praktik standar untuk styling cross-browser yang dapat diprediksi. Reset tidak secara langsung mengatasi box-sizing tetapi menormalkan kekacauan seputar default yang diwariskan.
• Properti box-sizing di CSS3, 2009 hingga 2014.CSS3 memperkenalkan box-sizing: border-box sebagai alternatif opt-in untuk content-box. WebKit dan Firefox mendukungnya dari 2009; IE 8 (2009) menjadi versi IE pertama yang mendukungnya secara native. Memungkinkan developer untuk memilih box model gaya IE atau gaya W3C per elemen.
• Border-box universal Paul Irish, 2012.Paul Irish (Google) menerbitkan posting blog * { box-sizing: border-box } FTW (Februari 2012), berargumen bahwa border-box universal adalah default yang waras untuk proyek baru. Pola ini menyebar dengan cepat melalui default framework (Bootstrap, Tailwind, Material UI). Pada 2015, sebagian besar reset CSS dan framework dirilis dengan border-box sebagai default.
• Properti logis, 2018 hingga 2024.CSS Logical Properties and Values Module Level 1 (CR Juni 2018) memperkenalkan alternatif yang agnostik terhadap arah: margin-inline-start (awal arah teks) sebagai pengganti margin-left, padding-block (atas + bawah) sebagai pengganti padding-top + padding-bottom. Penting untuk bahasa kanan-ke-kiri (Arab, Ibrani) dan internasionalisasi modern. Dukungan browser mencapai 95%+ pada 2022.

Alur kerja dunia nyata

• Men-debug bug layout.Ketika sebuah elemen dirender pada ukuran yang tidak terduga, membuka panel gaya yang dihitung dari DevTools browser mengungkapkan empat nilai kotak secara numerik. Visualizer ini berguna untuk mengerjakan matematika sebelumnya: jika saya mengatur width 200, padding 16, border 2, berapa ukuran total dalam setiap mode box-sizing? Sangat berguna saat mengajar junior mengapa width: 100% dengan padding melampaui induk dalam mode content-box.
• Mengajarkan CSS kepada pemula.Box model adalah konsep abstrak pertama yang harus diinternalisasi oleh pengembang web pemula. Visualisasi interaktif yang berkode warna mengalahkan membaca spesifikasi. Instruktur bootcamp dan pembelajar belajar mandiri menggunakan visualizer box model sebagai cara taktil untuk melihat bagaimana margin, border, dan padding menumpuk. Alat ini ada sebagian untuk tujuan ini.
• Sizing komponen sistem desain.Sistem desain menentukan tinggi tombol, ritme padding, dan skala margin dalam token (misalnya, spacing-1, spacing-2, spacing-3). Saat menerapkan ini dalam kode, box model menentukan apakah tombol yang dirender final adalah ukuran yang dimaksudkan. Visualisasikan matematika terlebih dahulu untuk menangkap kesalahan off-by-padding sebelum mereka dirilis ke handoff Figma-ke-React.
• Desain responsif dan margin persentase.Nilai persen untuk padding, margin, width, dan height dihitung relatif terhadap lebar konten induk (bukan tinggi, mengherankan), yang dapat menyebabkan perilaku aneh di mobile. Visualizer box model membantu Anda memikirkan apa arti persentase sebelum menulis CSS. Misalnya, padding-top: 50% pada div menciptakan kontainer aspect-ratio persegi (digunakan untuk placeholder gambar di hari-hari sebelum properti aspect-ratio).
• Sizing target hit aksesibilitas.WCAG 2.1 SC 2.5.5 (Level AAA) merekomendasikan target sentuh minimum 44x44 piksel CSS. Box model menentukan apakah konten + padding gabungan tombol memenuhi ambang ini. Gunakan visualizer untuk mengkonfirmasi bahwa padding: 12px 16px di sekitar teks line-height 18px memberi tombol yang melebihi 44px di kedua dimensi, memenuhi pedoman.
• Penyelarasan CSS Grid dan Flexbox.Alat layout modern (CSS Grid, Flexbox) memperlakukan setiap item grid/flex sebagai kotak yang tunduk pada box model. Memahami bagaimana padding dan margin berinteraksi dengan gap, justify-content, dan align-items membutuhkan kefasihan box model. Penggabungan margin ditekan di dalam kontainer flex/grid, yang sering mengejutkan developer CSS yang terbiasa dengan layout block tradisional.

Jebakan umum dan artinya

• Kejutan penggabungan margin.Ketika dua elemen block memiliki margin yang menyentuh secara vertikal, mereka bergabung menjadi yang lebih besar dari keduanya, bukan jumlahnya. Margin bawah 20px yang bertemu dengan margin atas 30px menghasilkan ruang 30px, bukan 50px. Margin induk dan anak pertama/terakhir juga bergabung jika induk tidak memiliki padding, border, atau overflow yang diatur. Di dalam kontainer flex atau grid, margin tidak bergabung. Aturan ini telah menangkap setiap developer CSS pada suatu titik.
• Matematika lebar content-box vs border-box.Mengatur width: 100%; padding: 20px pada elemen content-box membuatnya 40px lebih lebar dari induk (overflow). Dengan border-box, deklarasi yang sama duduk di dalam induk dengan benar. Ini adalah gotcha box-model yang paling umum; aturan universal * { box-sizing: border-box } memperbaiki sebagian besarnya secara preemptif. Selalu tahu mode mana yang Anda kerjakan.
• Padding/margin persen relatif terhadap lebar.padding-top: 50% dan margin-bottom: 50% menghitung persentase berdasarkan lebar konten induk, bukan tinggi. Ini tidak jelas dan merupakan dasar dari hack kontainer aspect ratio klasik (div dengan padding-top: 56.25% membuat kotak 16:9). Sekarang CSS memiliki properti aspect-ratio, tetapi kode lama dan Tailwind modern keduanya bergantung pada trik padding-persen.
• Celah baseline elemen inline.Sebuah di dalam div kontainer memiliki celah misterius 4 hingga 6 piksel di bawahnya. Ini karena elemen inline menyelaraskan ke baseline teks, meninggalkan ruang untuk descender. Perbaiki dengan img { display: block }, img { vertical-align: bottom }, atau mengatur font-size: 0 pada induk. Ini adalah salah satu bug box-model tertua di CSS, sejak 1996.
• Margin negatif untuk trik layout.Margin menerima nilai negatif, yang menarik elemen satu sama lain dan kadang-kadang berguna (misalnya, memperluas kontainer di luar padding induknya). Namun, margin negatif adalah sumber bug overlap yang membingungkan yang sering. Gunakan dengan sengaja, beri komentar pada kode Anda, dan lebih suka posisi CSS Grid/Flexbox jika memungkinkan. Padding negatif adalah CSS yang tidak valid dan diabaikan oleh browser.
• Padding + border + content > kontainer.Ketika jumlah content + padding + border melebihi lebar induk yang tersedia, elemen melampaui. Perbaikan umum: box-sizing: border-box, mengurangi nilai width, menggunakan overflow: hidden pada induk (memotong overflow), atau min-width: 0 pada anak-anak flex untuk mengganti perilaku implisit min-width: auto. Banyak bug layout rusak di mobile adalah overflow yang disebabkan oleh matematika box-model.

Privasi: semuanya berjalan di browser Anda

Alat pembelajaran dan visualisasi CSS hadir dalam dua rasa: halaman HTML sederhana yang menjalankan JavaScript sisi klien (pribadi, cepat, tanpa setup) dan editor cloud dengan proyek yang disimpan (kolaboratif tetapi dengan trade-off privasi). Alat ini adalah jenis pertama. Nilai yang Anda masukkan, status toggle box-sizing Anda, CSS yang dihasilkan Anda: semuanya tetap dalam sesi browser Anda. Muat ulang halaman dan statusnya hilang kecuali Anda menyalin CSS terlebih dahulu.

Taruhan privasi rendah di sini karena nilai box model jarang mengandung informasi sensitif. Tetap saja, kurangnya analitik penting: Anda dapat bereksperimen dengan bebas tanpa proses trial-and-error Anda direkam. Sangat berguna dalam pengaturan kelas atau pelatihan perusahaan di mana memiliki siswa atau peserta pelatihan mendaftar akun di platform pihak ketiga adalah titik gesekan. Ini adalah halaman statis tunggal tanpa backend, dapat digunakan di browser apa pun, termasuk mesin perusahaan yang terkunci.

Saat alat lain adalah pilihan yang tepat

• DevTools browser untuk debugging langsung.Chrome dan Firefox DevTools memasukkan panel box model yang menampilkan empat nilai box untuk elemen yang dipilih pada halaman live. Edit nilai inline dan lihat halaman diperbarui. Untuk men-debug layout halaman yang sebenarnya (bukan eksplorasi box-model abstrak), DevTools mengalahkan alat ini karena bekerja pada kode nyata Anda dengan kaskade CSS nyata dan pewarisan.
• Figma untuk output spec desain.Desainer menggunakan Figma, Sketch, atau Adobe XD untuk meletakkan komponen dengan pengukuran piksel yang tepat. Panel inspeksi alat desain mengekspor nilai margin dan padding yang diterjemahkan oleh developer menjadi CSS. Untuk handoff desain-ke-pengembangan, alat desain adalah sumber kebenaran; visualizer ini untuk memahami perilaku CSS, bukan untuk menghasilkan spesifikasi komponen produksi.
• CSS-in-JS untuk enkapsulasi komponen.Saat membangun library komponen dengan styled-components, Emotion, vanilla-extract, atau solusi CSS-in-JS serupa, box model dienkapsulasi dalam setiap komponen. Margin pada wrapper terluar, padding di dalam. Visualizer ini membantu memikirkan geometri komponen individu; library menangani koordinasi layout antar komponen.
• Alat CSS Grid/Flexbox untuk layout.Untuk layout multi-elemen (grid halaman, galeri kartu, bar navigasi), CSS Grid dan Flexbox adalah abstraksi yang tepat, bukan box model saja. Alat Flexbox Generator dan CSS Grid Generator kami membantu dengan layout tersebut secara langsung. Box model diperlukan tetapi tidak cukup untuk layout modern; gunakan alat yang tepat untuk skala yang tepat.

Pertanyaan umum lainnya

Haruskah saya menggunakan universal * { box-sizing: border-box }?

Untuk sebagian besar proyek, ya. Proposal Paul Irish tahun 2012 sekarang adalah default industri dan sejalan dengan bagaimana sebagian besar developer mengharapkan width dan height bekerja. Framework seperti Bootstrap, Tailwind, Bulma, dan Material UI dirilis dengan border-box sebagai default. Proyek modern yang dimulai pada 2026 harus mengatur *, *::before, *::after { box-sizing: border-box; } di bagian atas reset mereka, dan jarang perlu memikirkan box-sizing lagi. Override khusus ke content-box dimungkinkan untuk elemen individu di mana border-box akan mengacaukan hal-hal.

Mengapa margin saya mendorong induk ke bawah alih-alih mendorong saudara?

Ini adalah penggabungan margin. Ketika margin atas anak bertemu dengan tepi atas induk tanpa padding/border di antaranya, margin anak melarikan diri dan diterapkan ke induk sebagai gantinya. Perbaikan: tambahkan padding-top: 1px ke induk (nilai apa pun berfungsi), tambahkan border: 1px solid transparent, atur induk menjadi kontainer flex atau grid (penggabungan ditekan dalam mode tersebut), atau gunakan display: flow-root pada induk (aturan modern eksplisit menetapkan konteks pemformatan block baru). Semua ini menghalangi margin dari penggabungan.

Apa perbedaan antara margin: auto dan margin: 0?

margin: 0 berarti tidak ada margin; elemen duduk rata dengan tetangganya. margin: auto berarti browser menghitung margin untuk mendistribusikan ruang horizontal yang tersisa, biasanya digunakan untuk memusatkan elemen block: margin-left: auto; margin-right: auto; membagi ruang yang tersisa secara merata. margin: auto auto auto auto (atau shorthand margin: auto) memusatkan baik secara horizontal maupun vertikal di dalam kontainer flex. Di luar flex/grid, hanya margin auto horizontal yang berfungsi.

Apa perbedaan outline dari border?

Outline menggambar di sekitar elemen tetapi berada di luar box model: tidak menambah ukuran elemen dan tidak mendorong tetangga menjauh. Border adalah bagian dari box model dan menambah ukuran yang dirender. Outline biasanya digunakan untuk cincin fokus (outline :focus-visible) di mana Anda ingin indikator yang terlihat tanpa menggeser layout. Border digunakan ketika garis seharusnya menjadi bagian dari struktur elemen. Jangan hapus outline: none tanpa menyediakan indikator fokus alternatif; melakukan itu merusak aksesibilitas keyboard.

Mengapa menggunakan properti logis seperti margin-inline-start?

Properti logis (margin-block-start, padding-inline, dll.) beradaptasi dengan arah penulisan dokumen. Dalam bahasa Inggris (kiri-ke-kanan), margin-inline-start sama dengan margin-left. Dalam bahasa Arab atau Ibrani (kanan-ke-kiri), itu menjadi margin-right secara otomatis. Untuk situs yang mendukung beberapa bahasa, properti logis membuat internasionalisasi CSS otomatis. Untuk situs khusus bahasa Inggris, mereka setara dalam efek tetapi memberi sinyal niat lebih jelas: margin ini berada di awal aliran teks daripada margin ini berada di sisi kiri.

Bagaimana cara membuat kotak dengan aspect-ratio tetap?

Cara modern adalah properti CSS aspect-ratio: aspect-ratio: 16/9 pada div membuat tingginya secara otomatis 9/16 dari lebarnya. Didukung di semua browser modern (2021+). Teknik lama menggunakan padding-top sebagai persentase: div dengan padding-top: 56.25% membuat rasio 16:9 (9/16 = 56.25%). Trik padding-top masih berfungsi tetapi sintaks properti lebih bersih. Gunakan aspect-ratio untuk kode baru; hack lama tetap di Tailwind dan alat lain yang membutuhkan dukungan browser yang luas.