Apa Itu Box Model ?

Setiap elemen yang dapat ditampilkan terdiri dari satu atau lebih kotak persegi panjang. CSS Box Model biasanya menggambarkan bagaimana kotak persegi panjang yang diletakkan pada halaman web.

 

 

 

Kotak-kotak ini dapat memiliki sifat yang berbeda dan dapat berinteraksi satu sama lain dengan cara yang berbeda, tapi setiap kotak memiliki area konten dan opsional sekitarnya margin, padding, dan border.

Diagram berikut menunjukkan bagaimana margin, padding, dan border CSS menentukan berapa banyak ruang elemen yang dapat diletakan di halaman web.

css-box-model
CSS Box Model

Lebar dan Tinggi Elemen

Biasanya ketika Anda mengatur lebar dan tinggi dari suatu elemen menggunakan properti CSS width dan height, pada kenyataannya Anda hanya mengatur lebar dan tinggi area konten dari elemen. Lebar aktual dan tinggi kotak elemen tergantung pada beberapa faktor.


Ruang atau lebar dan tinggi yang sebenarnya di hitung seperti ini :

Total Height height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom
Total Width width + padding-left + padding-right + border-left + border-right + margin-left + margin-right

Oke mungkin sekian sedikit penjelasan mengenai Box Model, semoga bermanfaat.