Hari 10: CSS Box Model – Belajar CSS From Zero to Hero

by

Pelajari CSS Box Model: margin, border, padding, dan content. Lengkap dengan penjelasan, contoh kode, ilustrasi, studi kasus, dan latihan praktis untuk pemula.

Hari 10: CSS Box Model – Belajar CSS From Zero to Hero

Apa Itu CSS Box Model?

Setiap elemen HTML di browser dipandang seperti sebuah kotak. Kotak ini disebut CSS Box Model dan terdiri dari 4 bagian utama:

  1. Content → isi elemen (teks, gambar, dll).
  2. Padding → ruang antara content dan border.
  3. Border → garis tepi di sekitar elemen.
  4. Margin → ruang di luar border untuk memisahkan elemen lain.

Box Model sangat penting karena berhubungan langsung dengan layout, spacing, dan desain responsif.

Struktur CSS Box Model

Ilustrasi sederhana:

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

Properti dalam Box Model

1. Content

Area utama tempat teks, gambar, atau elemen lain ditampilkan.

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

Menentukan lebar dan tinggi konten.

2. Padding

Ruang di antara content dan border.

div {
  padding: 20px;
}

Konten memiliki jarak 20px dari border.

Bisa ditulis spesifik:

div {
  padding-top: 10px;
  padding-right: 15px;
  padding-bottom: 20px;
  padding-left: 25px;
}

3. Border

Garis yang membungkus padding dan content.

div {
  border: 2px solid black;
}

Jenis border bisa solid, dashed, dotted, double, dll.

4. Margin

Jarak di luar border untuk memisahkan elemen lain.

div {
margin: 30px;
}

Seperti padding, margin juga bisa diatur per sisi.

Box-Sizing: content-box vs border-box

Secara default, CSS menggunakan content-box, artinya width dan height hanya menghitung area content.

Namun, banyak developer menggunakan:

* {
  box-sizing: border-box;
}

Dengan border-box, ukuran total elemen termasuk content + padding + border, sehingga lebih mudah membuat layout.

Studi Kasus: Kartu Produk

HTML:

<div class="card">
  <h2>Produk A</h2>
  <p>Harga: Rp100.000</p>
</div>

CSS:

.card {
  width: 250px;
  padding: 20px;
  margin: 15px;
  border: 2px solid #333;
  background-color: #f9f9f9;
  box-sizing: border-box;
}

Hasil:

  • Kotak rapi dengan padding di dalam.
  • Border tegas.
  • Margin memberi jarak antar elemen.
  • Background membuat isi terlihat jelas.

Kesalahan Umum Pemula

  1. Lupa box-sizing → hasil ukuran elemen sering tidak sesuai harapan.
  2. Margin collapse → dua margin vertikal bisa saling menimpa, bukan ditambah.
  3. Padding terlalu besar → membuat content tampak “terjepit”.

Tips Menguasai CSS Box Model

  • Gunakan * { box-sizing: border-box; } untuk kontrol lebih mudah.
  • Manfaatkan margin: auto; untuk centering horizontal.
  • Kombinasikan padding + border + margin untuk membuat elemen seimbang.
  • Gunakan DevTools (F12 di Chrome/Firefox) untuk melihat box model secara visual.

Latihan Praktis Hari 10

  1. Buat sebuah div berukuran 300px x 150px.
  2. Tambahkan:
    • padding: 20px;
    • border: 5px dashed blue;
    • margin: 30px;
  3. Gunakan DevTools untuk memeriksa Box Model hasilnya.

Referensi Belajar

Rencana Belajar Selanjutnya

Hari ini kamu sudah memahami CSS Box Model: content, padding, border, margin, dan box-sizing. Besok, kita akan masuk ke Hari 11: CSS Text untuk mempelajari cara mengatur tipografi di website.
👉 Lanjut ke Hari 11: CSS Text

Kesimpulan

  • Box Model terdiri dari content, padding, border, margin.
  • Gunakan border-box agar ukuran lebih mudah diatur.
  • Box Model adalah dasar dari layout CSS.

📦 Tantangan Hari 10:
Buat desain sederhana “kartu produk” dengan Box Model (content, padding, border, margin). Upload hasilmu ke GitHub atau bagikan di media sosial dengan hashtag #BelajarCSS.

Leave a Comment