Tujuan: Pengguna dapat menyebutkan empat lapisan kotak CSS dan mengaturnya pada satu elemen.
±9 menit·Diperiksa 2026-09-22
Setiap elemen di halaman web digambar sebagai kotak persegi. MDN menyebut kotak itu punya empat area yang menumpuk dari dalam ke luar.
Content: area isi, tempat teks atau gambar berada.
Padding: ruang di dalam elemen, antara isi dan garis tepi.
Border: garis tepi elemen.
Margin: ruang di luar elemen, yang memisahkannya dari elemen lain.
.kartu {
padding: 16px; /* ruang di dalam */
border: 2px solid #7051c4; /* garis tepi */
margin: 24px; /* ruang di luar */
}
Nilai padding dan margin boleh ditulis sekaligus untuk empat sisi (padding: 16px) atau per sisi (padding-top, padding-right, padding-bottom, padding-left).
Praktik
Pada aturan .kotak, tambahkan padding: 16px, border: 2px solid #7051c4, dan margin: 24px. Tekan Jalankan untuk melihat perubahannya.
Hasil
Kode tersimpan otomatis saat kamu mengetik.
Pemeriksaan ini mencocokkan kodemu dengan instruksi latihan. Belum ada penilaian kualitas kode secara menyeluruh. Preview menjalankan HTML dan CSS saja, tanpa JavaScript.
Selesaikan latihannya dulu untuk menandai pelajaran ini selesai.