Latihan 1: Box Model — CSS
Latihan 1 dari materi Box Model di CSS — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Di aturan div { ... } yang sudah ada, tambahkan empat baris ini sebelum }:
box-sizing: border-boxwidth: 200pxpadding: 20pxborder: 2px solid black
Hasilnya, kotak biru yang lebarnya di layar tetap 200px, walaupun punya padding dan border.
Keempat baris itu dicek, termasuk border-nya: tebal 2px, garis solid.
Hint
- Kotaknya butuh lebar, padding dan garis tepi, plus satu baris yang bikin padding dan border dihitung di dalam lebarnya.
- Semuanya ditulis di aturan div yang sudah ada: box-sizing, width, padding dan border, masing-masing properti: nilai; dengan titik koma.
- div { background: lightblue; box-sizing: border-box; width: 200px; padding: 20px; border: 2px solid black; }
