Latihan 2: Box Model — CSS

Latihan 2 dari materi Box Model di CSS — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Dua kotak di editor sama-sama width: 200px. Bikin keduanya menghitung lebar dengan cara yang beda:

Di aturan .box-content, .box-border { ... } yang sudah ada, tambahkan padding: 20px dan border: 5px solid black, biar bedanya kelihatan.
Di bawahnya, bikin aturan baru .box-content { } berisi box-sizing: content-box.
Lalu aturan baru .box-border { } berisi box-sizing: border-box.

Hasilnya, kotak pertama selebar 250px di layar, kotak kedua tetap 200px.

Yang dicek: padding 20px dan border 5px di kedua kotak, dan dua aturan box-sizing yang ditulis terpisah. content-box itu bawaan browser, jadi aturan .box-content { box-sizing: content-box; } dicek dari kodenya.

Hint

Dua kotak ini butuh nilai box-sizing yang beda, jadi masing-masing perlu aturannya sendiri.
Aturan dengan koma (.box-content, .box-border) memberi nilai yang sama ke dua kotak. Bikin dua aturan baru di bawahnya, satu per class, masing-masing dengan box-sizing dan kurung kurawal lengkap.
.box-content { box-sizing: content-box; } .box-border { box-sizing: border-box; }, plus padding: 20px; border: 5px solid black; di aturan yang sudah ada.

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 2: Box Model — CSS

Hint

Memperbarui Aplikasi