A. Pengertian Box Model

Dalam CSS, setiap elemen dianggap sebagai sebuah kotak (box).

Ketika browser menampilkan sebuah elemen, sebenarnya browser membuat struktur seperti berikut:

+-------------------------+
|         Margin          |
|  +-------------------+  |
|  |      Border       |  |
|  | +---------------+ |  |
|  | |    Padding    | |  |
|  | | +-----------+ | |  |
|  | | | Content   | | |  |
|  | | +-----------+ | |  |
|  | +---------------+ |  |
|  +-------------------+  |
+-------------------------+

Komponen Box Model terdiri dari:

1. Content
2. Padding
3. Border
4. Margin

---

B. Content

Content adalah isi utama elemen.

Contoh:

<p>Belajar CSS</p>

Tulisan “Belajar CSS” adalah content.

---

C. Padding

Padding adalah ruang di dalam elemen.

p{
    padding:20px;
}

Ilustrasi:

+----------------+
|   Padding      |
|  Belajar CSS   |
|   Padding      |
+----------------+

---

D. Border

Border adalah garis tepi elemen.

p{
    border:2px solid black;
}

---

E. Margin

Margin adalah jarak antar elemen.

p{
    margin:30px;
}

---

Praktik 1

Buat file HTML berikut:

<div class="box">
    Kotak Pertama
</div>

CSS:

.box{
    width:300px;
    padding:20px;
    border:2px solid blue;
    margin:30px;
}

---

Latihan

1. Buat kotak berukuran 400px.
2. Beri padding 25px.
3. Beri border merah 3px.
4. Beri margin 50px.

---

Tugas Praktik

Buat kartu profil siswa menggunakan Box Model yang berisi:

• Foto
• Nama
• Kelas
• Jurusan

Dengan border dan padding yang rapi.