Cara bermain Box Model Bengkel
- Baca instruksi level. Properti yang perlu kamu pakai disebut di sana.
- Tulis CSS di dalam blok
.kotak. Lapisan kotakmu digambar ulang setiap kali kamu mengetik, dengan warna seperti di DevTools: isi biru, padding hijau, border kuning, margin oranye. - Tabel di bawah meja membandingkan ukuran tiap lapisan kotakmu dengan pesanan, dalam piksel.
- Tekan Cek jawaban atau Ctrl + Enter. Kotakmu juga dicek di meja yang lebih sempit, jadi
autodan persen harus benar-benar dipakai. - Kalau buntu, buka Petunjuk. Petunjuk pertama mengarahkan, petunjuk terakhir hampir menjawab.
- Level yang sudah selesai tetap tercentang saat kamu kembali dengan browser yang sama.
Yang kamu pelajari
- Level 1
width, height
Ukuran isi kotak. Secara bawaan, padding dan border ditambahkan di luarnya.
- Level 2
padding
Ruang di antara isi dan border. Dua nilai berarti atas-bawah lalu kiri-kanan, empat nilai searah jarum jam mulai dari atas.
- Level 4
border
Bingkai di luar padding. Perlu gaya garis seperti
solid, kalau tidak tebalnya dihitung 0. - Level 5
margin
Jarak di luar border, memisahkan kotak dari sekitarnya.
- Level 6
Margin collapse
Margin vertikal dua kotak yang bertumpuk melebur jadi satu, dan yang dipakai yang terbesar.
- Level 7
box-sizing: border-box
Membuat
widthdanheightmengukur sampai border, jadi padding dan border tidak menambah ukuran total. - Level 9
margin: auto
Margin kiri dan kanan
automembagi sisa ruang sama rata, jadi kotak berada di tengah. - Level 10
Persen
widthdan padding dalam persen dihitung dari lebar wadah, termasuk padding atas dan bawah.
`width` bawaan hanya mengukur isi
Kotak dengan width: 200px; padding: 20px; border: 5px solid; lebarnya 250px di layar, bukan 200px. Secara bawaan (box-sizing: content-box), width hanya mengukur isi, lalu padding dan border ditambahkan di kedua sisinya.
Dengan box-sizing: border-box, lebar totalnya tetap 200px dan isinya yang menyusut jadi 150px. Ukuran seperti ini lebih mudah dihitung, jadi preflight Tailwind memasang box-sizing: border-box ke semua elemen.
Tanya jawab
Apakah harus daftar akun untuk bermain?
Tidak. Semua level bisa dimainkan tanpa akun. Kemajuanmu disimpan di browser yang kamu pakai, jadi akan hilang kalau data browser dihapus.
Kenapa jawaban yang berbeda bisa sama-sama benar?
Jawaban dicek dari ukuran tiap lapisan yang dirender browser, bukan dari teks CSS-mu. margin: 30px 0 0 40px dan margin-top: 30px; margin-left: 40px menghasilkan kotak yang sama, jadi keduanya diterima.
Kenapa border: 6px tidak memunculkan border?
Shorthand border mengembalikan gaya garis ke none kalau tidak ditulis, dan border bergaya none tebalnya dihitung 0. Tulis gayanya juga, misalnya border: 6px solid.
Kenapa margin atas dan margin bawah tidak dijumlahkan?
Itu margin collapse. Kalau dua kotak block bertumpuk, margin bawah kotak atas dan margin atas kotak bawah melebur, dan jaraknya mengikuti yang terbesar. Margin kiri dan kanan tidak pernah melebur.
Kenapa properti seperti position atau display tidak berpengaruh?
Game ini hanya membaca width, height, box-sizing, padding, border, dan margin. Properti lain diabaikan supaya latihannya tetap fokus ke box model.