Model Kotak CSS

Semua elemen HTML boleh dianggap berada di dalam kotak. Dalam CSS, istilah "model kotak" digunakan apabila bercakap tentang desain dan tata letak. Model Kotak CSS pada dasarnya adalah sebuah kotak yang mengelilinggi elemen HTML, dan ia terdiri daripada: margin, border, padding, dan content (kandungan).

Model kotak membenarkan kita untuk meletakkan border (sempadan) di dalam elemen ruangan. Gambar di bawah menggambarkan model kotak:

Penerangan tentang Model Kotak

• Margin - Menyediakan ruang di sekitar sempadan. Margin tidak mempunyai warna latar belakang dan ia benar-benar telus.
• Border - Sebuah sempadan yang terletak di sekitar padding dan content. Sempadan dipengaruhi oleh latar belakang kotak. 
• Padding - Menyediakan ruang di sekitar kandungan. Padding dipengaruhi oleh warna latar belakang kotak. 
• Content - Kandungan kotak, di mana teks dan gambar berada. 

Dalam rangka untuk mengatur lebar dan tinggi suatu elemen dengan betul di semua browser, anda perlu mengetahui bagaimana model kotak bekerja. 


Lebar dan Tinggi sebuah Elemen 

Penting:
Jika anda menentukan lebar dan tinggi sifat suatu unsur dengan CSS, anda hanya mengatur lebar dan tinggi kawasan kandungan. Untuk mengetahui saiz penuh elemen, anda harus juga menambah padding, border dan margin.

Contoh;
Jumlah lebar elemen dalam contoh di bawah ini adalah 300px: 
width: 250px; 
padding: 10px; 
border: 5px solid gray; 
margin: 10px;
 
Mari kira buat kiraan: 
250px (lebar) 
+ 20px (kiri dan kanan padding) 
+ 10px (kiri dan kanan border) 
+ 20px (margin kiri dan kanan) 
= 300px

Oleh sebab itu pengiraan jumlah lebar elemen adalah begini: 
Jumlah lebar elemen = width + kiri kanan padding + padding + border + kanan kiri border + margin kiri + margin kanan.

Sekian.