Box model, margin, dan padding

Bedakan margin di luar dan padding di dalam elemen.

Pahami konsepnya

Setiap elemen HTML adalah kotak, dan box model membedahnya menjadi empat lapisan: isi (content), padding di dalam border, border itu sendiri, dan margin di luar border. Padding memberi ruang bernapas antara isi dan tepi elemen; margin mendorong elemen menjauh dari tetangganya — mengatur keduanya adalah 80% pekerjaan tata letak harian.

Keduanya sadar arah. Bentuk panjangnya menyebut sisi satu per satu: margin-top, margin-right, margin-bottom, margin-left — padding pun demikian. Bentuk ringkasnya satu nilai untuk semua sisi (padding: 20px), dua nilai untuk vertikal-horizontal (margin: 10px 24px), atau empat nilai searah jarum jam atas-kanan-bawah-kiri (padding: 8px 20px 6px 12px).

Satu jebakan klasik: menetapkan width lalu menambah padding dan border membuat kotak menjulur melebihi lebar yang ditulis. box-sizing: border-box menyembuhkannya — lebar yang dinyatakan sudah termasuk padding dan border, sehingga ukuran kotak dapat dipercaya. Praktik modern memasang border-box global untuk semua elemen lewat selektor *.

Coba contoh kode

* { box-sizing: border-box; }

.kartu {
  width: 280px;
  padding: 20px;
  border: 2px solid #56636a;
  margin: 16px;
}

Lebar kartu tetap 280px karena border-box menghitung padding dan border ke dalamnya; margin 16px berada di luar ukuran itu sebagai jarak ke tetangga. Uji pemahaman: ganti padding menjadi 32px dan amati lebar luar kotak tidak berubah.

Margin negatif dan auto

.geser { margin-left: -8px; }   /* menyenggol ke kiri */

.tengah {
  width: 600px;
  margin: 0 auto;              /* rata tengah horizontal */
}

Margin boleh negatif — elemen menyusup ke wilayah tetangganya, berguna untuk efek tumpang tindih. Trik margin: 0 auto pada elemen berlebar tetap adalah cara klasik menengahkannya di halaman.

Latihan singkat

Buat dua kartu bersebelahan dengan padding dalam berbeda dan margin luar 24px, buktikan border-box menjaga lebarnya.