← CSS6 / 62

box-sizing: border-box

Secara default, width: 200px + padding: 20px menghasilkan kotak selebar 240px — padding ditambahkan di luar width. Ini membuat perhitungan layout menyakitkan. box-sizing: border-box membuat width mencakup padding dan border, sehingga 200px berarti benar-benar 200px. Hampir semua proyek nyata menerapkannya ke seluruh elemen.

👀 Contoh dulu

/* TANPA border-box: 100 + 20 + 20 = 140px di layar */
.a { width: 100px; padding: 20px; }

/* DENGAN border-box: tetap 100px, padding masuk ke dalam */
.b { width: 100px; padding: 20px; box-sizing: border-box; }

Hasilnya: Kotak .a jadi lebih lebar dari yang kamu tulis (140px), sementara .b benar-benar 100px.

💡 Karena itu hampir semua proyek menulis * { box-sizing: border-box } sebagai aturan pertama.

📝 Sekarang giliranmu

Tambahkan aturan untuk selector * (semua elemen) dengan box-sizing: border-box;.

Preview
← SebelumnyaBerikutnya →