Pemahaman konsep model kotak CSS sangat berguna dalam mendesign dan menata halaman HTML.

Semua elemen HTML bisa dianggap sebagai sebuah kotak yang di dalamnya berisi elemen HTML.
Dan pada kotak ini terdapat margin, border, padding dan konten atau isi dari elemen HTML itu sendiri.

Konten / isi - biasanya berupa teks atau gambar.
Padding - bagian yang mengelilingi konten dan bersifat transparan.
Border - bagian yang mengelilingi padding bila diset maka akan berupa garis kotak.
Margin - bagian yang mengelilingi border dan bersifat transparan.

Lebar dan Tinggi dari elemen HTML

Pada saat kita mendefinisikan lebar dan tinggi dari sebuah elemen HTML maka jumlah total lebar dan tinggi dari kotak elemen HTML adalah ditambah padding, bordern dan margin.

Perhatikan gambar di atas, 

Margin = 5 artinya masing-masing ke 4 sisi margin bernilai 5.

Border = 2 artinya masing-masing ke 4 sisi border bernilai 2.

Padding = 5 artinya masing-masing ke 4 sisi padding bernilai 5.

Bila kita mendefinisikan elemen HTML tersebut dengan lebar=100 dan tinggi=50

Maka tinggi total dari elemen HTML tersebut menjadi:

margin kiri + border kiri + padding kiri + 100 + padding kanan + border kanan + margin kanan

5 + 2 + 5 + 100 + 5 + 2 + 5 = 124

Sedangkan lebar total dari elemen HTML menjadi:

margin atas + border atas + padding atas + 50 + padding bawah + border bawah + margin bawah 

5 + 2 + 5 + 50 + 5 + 2 + 5 = 74