Kotak dan ukuran · Pelajaran 3
Tujuan: Pengguna dapat merapikan satu kartu dengan lebar maksimal, margin otomatis, dan padding, lalu menghitung lebar totalnya.
Toko Nusantara memasang pengumuman libur di halaman depan. Kotaknya masih menempel ke tepi layar dan teksnya melebar sampai ujung. Rapikan dengan model kotak.
Nilai margin: 0 auto berarti margin atas dan bawah 0, sedangkan margin kiri dan kanan dibagi rata oleh browser, sehingga elemen yang punya lebar berada di tengah induknya.
Misi akhir modul. Selesaikan minimal 4 dari 4 tugas untuk menuntaskan modul ini.
Beri aturan .pengumuman: max-width: 480px, margin: 0 auto, padding: 24px, dan border-radius: 12px.
Hasil
Pemeriksaan ini mencocokkan kodemu dengan instruksi latihan. Belum ada penilaian kualitas kode secara menyeluruh. Preview menjalankan HTML dan CSS saja, tanpa JavaScript.
Sebuah elemen memakai box-sizing: content-box (nilai bawaan) dengan width: 300px, padding: 20px di keempat sisi, dan border: 5px. Berapa piksel lebar total yang dipakainya di layar?
Jawaban diperiksa di server. Latihan ini memastikan kamu memahami contohnya — bukan bukti seluruh pekerjaanmu sudah benar.
Elemen yang sama diberi box-sizing: border-box, tetap width: 300px, padding: 20px, border: 5px. Berapa piksel lebar totalnya sekarang?
Jawaban diperiksa di server. Latihan ini memastikan kamu memahami contohnya — bukan bukti seluruh pekerjaanmu sudah benar.
Dua kartu bersebelahan saling menempel. Properti mana yang mengatur jarak di luar kartu, antara kartu satu dan tetangganya?
Jawaban diperiksa di server. Latihan ini memastikan kamu memahami contohnya — bukan bukti seluruh pekerjaanmu sudah benar.
Selesaikan latihannya dulu untuk menandai pelajaran ini selesai.
Materi kelas ini diadaptasi dari Microsoft Web Dev for Beginners — 3-terrarium (CSS layout) (MIT), web.dev — Learn CSS, Learn Forms, Learn Accessibility (CC-BY-3.0). Rincian perubahan ada di halaman kelas.