Pengenalan Box Model

Model kotak (Box Model) adalah konsep dasar dalam CSS yang mendefinisikan bagaimana elemen HTML direndered dalam halaman web. Setiap elemen HTML dianggap sebagai kotak, dan model kotak ini terdiri dari empat bagian utama: konten, padding, border, dan margin.

Komponen Model Kotak:

1. Konten (Content): Bagian dalam elemen yang berisi teks, gambar, atau konten lainnya. Ukuran konten dapat diatur menggunakan properti width dan height.

2. Padding: Area transparan di sekitar konten, di antara konten dan batas (border) elemen. Padding dapat diatur dengan properti padding.

3. Border: Garis yang mengelilingi padding dan konten elemen. Border memiliki ketebalan, warna, dan gaya tertentu, yang dapat diatur menggunakan properti border.

4. Margin: Ruang di sekitar elemen, di luar border. Margin digunakan untuk memberikan jarak antara elemen dengan elemen lain di sekitarnya. Margin diatur dengan properti margin.

Struktur Model Kotak:

+-----------------------------------+
|              Margin               |
|  +----------------------------+   |
|  |            Border          |   |
|  |  +----------------------+  |   |
|  |  |       Padding        |  |   |
|  |  |  +----------------+  |  |   |
|  |  |  |     Konten     |  |  |   |
|  |  |  +----------------+  |  |   |
|  |  +----------------------+  |   |
|  +----------------------------+   |
+-----------------------------------+

Model kotak ini memungkinkan pengembang web untuk mengontrol tata letak dan penampilan elemen dengan lebih presisi, memungkinkan desain yang responsif dan terstruktur secara baik dalam halaman web.