Latihan 1: Box Model untuk UI — UI/UX

Latihan 1 dari materi Box Model untuk UI di UI/UX — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Kode awal punya kartu Kamar Teras, <div class="card"> selebar 300px berisi judul, total, dan tombol pesan selebar kartu, lalu catatan batal di bawahnya. Di <style> cuma ada lebar kartu dan ukuran tombol. Tambahkan aturan CSS:

Semua elemen: box-sizing: border-box, dengan selector * (boleh ditulis *, *::before, *::after).
.card: padding: 24px dan margin-bottom: 16px.

Sebelum border-box, padding 24px membuat kartu 300px jadi 348px, dan tombol width: 100% ikut melebar keluar. Sesudahnya kartu tetap 300px. Yang gak dinilai, tapi bikin kartunya kelihatan: border: 1px solid #e2e8f0. Elemen, class, dan teksnya biarkan seperti di kode awal.

Hint

border-box membuat padding dan border masuk ke dalam width: kartu 300px tetap 300px walau diberi padding. Padding adalah ruang di dalam kartu, margin adalah jarak ke catatan di bawahnya.
Tulis aturan dengan selector * untuk box-sizing, lalu tambahkan padding dan margin-bottom ke aturan .card yang sudah ada.
*, *::before, *::after { box-sizing: border-box; } .card { width: 300px; padding: 24px; margin-bottom: 16px; }

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Box Model untuk UI — UI/UX

Hint

Memperbarui Aplikasi