CSS TutorialLesson 13Preview gratis
CSS Box Model
Lesson ini bagian dari CSS · Semua level
Ringkasan
Box model menjelaskan bahwa setiap elemen HTML berbentuk kotak yang tersusun dari konten, padding, border, dan margin dari dalam ke luar. Memahami susunan ini membuat perhitungan ukuran elemen jauh lebih akurat, terutama saat menyusun tata letak. Dengan box-sizing: border-box, width dan height dihitung termasuk padding serta border sehingga lebih intuitif.
Poin kunci
- Susunan box model dari dalam ke luar: konten, padding, border, lalu margin.
- Secara bawaan, width dan height hanya mengukur area konten (content-box).
- box-sizing: border-box membuat width dan height mencakup padding serta border.
- Pada content-box, total lebar elemen = width + padding kiri-kanan + border kiri-kanan + margin kiri-kanan.
- Keluaran ukuran bisa diperiksa lewat tab Computed pada Developer Tools.
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.