Apa itu Box Model
Setiap elemen yang dapat ditampilkan terdiri dari satu atau lebih kotak persegi panjang. Model box CSS biasanya menjelaskan bagaimana kotak persegi panjang ini diletakkan di halaman web. Kotak-kotak ini dapat memiliki properti yang berbeda dan dapat berinteraksi satu sama lain dengan cara yang berbeda, tetapi setiap kotak memiliki konten area dan opsional seperti margin, padding, dan border.
Diagram berikut menunjukkan bagaimana margin, padding, dan border CSS properties menentukan berapa banyak spasi yang dapat diambil oleh suatu elemen pada halaman web.
Elemen Width dan Height
Biasanya ketika kalian mengatur lebar dan tinggi elemen menggunakan properti CSS width dan height, pada kenyataannya kalian hanya mengatur lebar dan tinggi konten area dari sebuah elemen saja. Sebenarnya lebar dan tinggi sebuah elemen box bergantung pada beberapa faktor.
Penghitungan ruang sebenarnya dari sebuah elemen box yaitu seperti berikut:
| Box Size | CSS Properties |
|---|---|
| Total Width | width + padding-left + padding-right + border-left + border-right + margin-left + margin-right |
| Total Height | height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom |
Catatan: Dalam CSS model box; konten area dari elemen box adalah area, tempat teks, gambar, daftar, tabel, form, video, dll.
