📦 Box Model & Border

Dalam CSS, setiap elemen pada halaman web itu sebenarnya bisa kita bayangin seperti kotak yang punya beberapa lapisan. Lapisan paling dalam itu adalah content, tempat isi teks, gambar, atau apa pun yang pengen kamu tampilkan. Nah, di luar content itu ada padding, semacam ruang kosong yang bikin isi kotak nggak nempel langsung ke pinggir. Padding ini penting supaya konten terlihat lebih rapi dan nggak mepet ke garis tepi.
Setelah padding, ada border, yaitu garis yang mengelilingi kotak itu. Border ini bisa kamu atur tebal, warna, atau gaya garisnya sesuai kebutuhan biar tampilannya makin menarik. Terakhir, di bagian paling luar ada margin, yaitu jarak kosong antara kotak ini dengan kotak elemen lain di sekitarnya. Margin ini penting supaya elemen nggak saling berhimpitan dan tata letak web jadi lebih enak dilihat. Nah, konsep gabungan dari content, padding, border, dan margin ini disebut Box Model, dan ngerti ini bakal bikin kamu lebih gampang atur tampilan dan jarak antar elemen di halaman webmu.

🔍 Bagian dari Box Model

• content: Ini adalah isi utama elemen, seperti teks, gambar, atau video yang ingin kamu tampilkan.
• padding: Ruang kosong di dalam elemen yang memisahkan isi (content) dari garis tepi (border). Bayangin ini seperti jarak napas supaya konten nggak nempel ke pinggir.
• border: Garis pembatas yang mengelilingi elemen. Kamu bisa atur warna, ketebalan, dan gaya garisnya sesuai selera.
• margin: Jarak kosong di luar border yang memisahkan elemen ini dari elemen lain di halaman. Fungsinya supaya elemen nggak saling berdempetan dan tata letak jadi rapi.

🧱 Properti Border

• border: Ini kayak paket lengkap buat bikin garis di sekitar elemen. Kamu bisa atur ketebalan, jenis garisnya (misal: solid, dashed, dotted), dan warnanya sekaligus.
• border-radius: Biar sudut kotak nggak kotak banget, kamu pakai ini buat bikin sudutnya melengkung atau bulat. Semakin besar nilainya, makin melengkung sudutnya.
• border-style: Buat pilih jenis garisnya, misal garis penuh (solid), putus-putus (dashed), atau titik-titik (dotted).
• border-color: Buat tentuin warna garisnya, bisa warna apa saja yang kamu mau.
• border-width: Buat atur ketebalan garisnya, bisa tipis banget sampai tebal.

.box {
  width: 200px;
  padding: 20px;
  margin: 20px;
  border: 2px solid #4ade80;
  border-radius: 10px;
  background-color: #f0fdf4;
}

⚙️ Demo Interaktif: