← CSS5 / 62

Box model: padding, border, margin

Setiap elemen adalah kotak berlapis: content (isi) → padding (jarak dalam, ikut kena warna latar) → border (garis tepi) → margin (jarak luar, selalu transparan). Membedakan padding dan margin adalah kunci: butuh ruang di dalam kotak? padding. Butuh jarak antar kotak? margin.

👀 Contoh dulu

.kotak {
  background: lightblue;
  padding: 30px;   /* ruang DALAM, ikut berwarna biru */
  border: 4px dashed navy;
  margin: 25px;    /* ruang LUAR, selalu transparan */
}

Hasilnya: Kotak biru dengan isi yang berjarak jauh dari garis tepi, garis putus-putus biru tua, dan jarak dari elemen sekitarnya.

💡 Cara mengingat: padding di dalam pagar (kena warna), margin di luar pagar (tidak kena warna).

📝 Sekarang giliranmu

Beri .kartu padding 20px, border 2px solid black, dan margin 10px.

Preview
← SebelumnyaBerikutnya →