Belajar CSS Bagian 4 : Mengenal Box Model pada CSS (Margin, Border, Padding dan Content)

Dalam CSS, Box Model adalah konsep dasar yang sangat penting untuk dipahami. Box model bukanlah properti CSS tertentu, melainkan cara CSS memandang dan mengatur sebuah elemen HTML di dalam halaman web.

Setiap elemen HTML—seperti <div>, <p>, atau <button>—dianggap sebagai sebuah kotak (box) yang memiliki beberapa bagian di dalamnya.

---

Apa Itu Box Model?

Secara sederhana, Box Model menjelaskan bahwa sebuah elemen HTML terdiri dari:

1. Content

2. Padding

3. Border

4. Margin

Urutannya selalu dari dalam ke luar.

Margin
└── Border
    └── Padding
        └── Content 

Mari kita bahas satu per satu agar lebih jelas.

---

1. Content (Isi Elemen)

Content adalah isi utama dari sebuah elemen.
Contohnya:

• Teks pada <p>

• Tulisan pada <button>

• Gambar pada <img>

Content ini memiliki:

• lebar (width)

• tinggi (height)

Contoh:

div {
  width: 200px;
  height: 100px;
}

2. Padding (Jarak Dalam)

Padding adalah jarak antara content dengan border.

Artinya:

• Padding memberi ruang di dalam elemen

• Background color akan ikut memenuhi area padding

Contoh:

button {
  padding: 8px 24px;
}

Artinya:

• 8px → jarak atas & bawah

• 24px → jarak kiri & kanan

Aturan Urutan Padding

Jika ditulis 4 nilai:

padding: 24px 12px 8px 4px; 

Urutannya adalah:

1. Atas

2. Kanan

3. Bawah

4. Kiri

---

3. Border (Garis Pembatas)

Border adalah garis yang membungkus padding dan content.

Contoh:

button {
  border: 2px solid #fcbf08;
}
Border memiliki:

• Ketebalan (px)

• Jenis garis (solid, dashed, dll)

• Warna

Border membantu kita melihat batas elemen secara visual, terutama saat belajar layout.

---

4. Margin (Jarak Luar)

Margin adalah jarak antara satu elemen dengan elemen lain di sekitarnya.

Berbeda dengan padding:

• Padding → ke dalam

• Margin → ke luar

Contoh:

button {
  margin: 16px;
}
Artinya:

• Memberi jarak 16px di semua sisi elemen

Margin juga bisa ditulis seperti padding:

margin: 16px 24px; 

---

Perbedaan Padding vs Margin (Penting!)

Padding	Margin
Jarak ke dalam elemen	Jarak ke luar elemen
Terpengaruh background	Tidak terpengaruh background
Jarak content ke border	Jarak antar elemen

---

Visualisasi Box Model

Biasanya di browser (Inspect Element):

• Content → biru

• Padding → hijau

• Border → kuning

• Margin → oranye

Ini membantu kita memahami kenapa jarak antar elemen bisa terlihat berbeda.

---

Contoh Lengkap CSS Box Model

.button {
  padding: 8px 24px;
  margin: 16px;
  border: 2px solid #fcbf08;
}

Dengan kode di atas:

• Tulisan tidak menempel ke border

• Tombol tidak menempel ke elemen lain

• Tampilan jadi lebih rapi dan nyaman dilihat

---

Kesimpulan

Box Model adalah fondasi layout di CSS.
Jika kamu ingin:

• Mengatur jarak teks

• Membuat tombol terlihat rapi

• Mengatur spasi antar elemen

Maka memahami content, padding, border, dan margin adalah langkah wajib.

👉 Hampir semua desain web modern bergantung pada box model.