Model Kotak (Box Model)

Memahami cara CSS menghitung ukuran elemen.

Penjelasan Lengkap

Semua elemen HTML pada dasarnya adalah kotak. Istilah "Box Model" digunakan saat membicarakan desain dan tata letak.

• Content (Isi) : Teks atau gambar yang ada di dalam elemen.

• Padding : Area transparan di sekeliling konten (di dalam garis tepi).

• Border (Garis Tepi) : Garis yang mengelilingi padding dan konten.

• Margin : Area transparan di luar border (jarak dengan elemen lain).

Contoh Kode

div {
    width: 300px;
    padding: 20px;
    border: 5px solid black;
    margin: 10px;
}

Hasil Tampilan

Console Output

Tugas Praktik (Pertanyaan)

Bagian manakah dari Box Model yang letaknya berada paling luar dan memisahkan satu kotak dengan kotak lainnya?