CSS3Tingkat: Fundamental5 min
CSS Box Model: Margin, Border, Padding & Content
Pahami konsep inti kalkulasi dimensi elemen di web: content area, padding dalam, garis border, margin luar, serta kegunaan box-sizing: border-box.
Empat Lapisan CSS Box Model
Pratinjau TerbukaSetiap elemen HTML yang dirender browser dianggap sebagai kotak berdimensi 4 lapisan:
Poin Penting:
Content: Area tempat teks, gambar, atau elemen anak ditampilkan.
Padding: Ruang transparan di sekeliling konten (di dalam border).
Border: Garis tepi yang membungkus padding dan konten.
Margin: Ruang kosong di luar border yang memisahkan elemen dengan elemen tetangga.
Mengapa box-sizing: border-box itu Wajib?
Secara default (content-box), nilai padding dan border akan menambah lebar total elemen. Mengatur box-sizing: border-box memastikan padding dan border dihitung ke dalam lebar yang ditentukan.
/* CSS Reset Terbaik */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
Live Compiler Runner
Akses Kursus Wajib Login
Buka Akses Penuh Silabus & Praktikum
Masuk dengan akun GitHub, Google, atau Akses Cepat Developer untuk membuka seluruh materi mendalam, menjalankan compiler interaktif, mengerjakan kuis, dan menyimpan progres belajar Anda.
145+ Modul Lengkap•Tersimpan Otomatis•Sertifikat Kelulusan Resmi