Box Model: Padding, Border dan Margin

Tajuk, perenggan, gambar, butang — pelayar melukis setiap satunya sebagai kotak. Setiap kotak ada empat lapisan yang sama, dari dalam ke luar:

content

Teks atau gambar itu sendiri. width dan height menetapkan bahagian ini (secara default).

padding

Ruang di dalam kotak, antara content dan border. Ia menunjukkan warna latar belakang kotak.

border

Garisan di sekeliling padding. Ia ada ketebalan, gaya (solid, dashed…) dan warna.

margin

Ruang di luar border yang menolak kotak lain menjauh. Sentiasa lut sinar (transparent).

Padding lawan margin

Tanya diri anda satu soalan: patutkah ruang ini ada warna latar kotak? Kalau ya, itu padding (ruang bernafas di dalam kad). Kalau tidak, itu margin (jarak antara dua kad).

.card {
  padding: 24px;              /* all four sides */
  border: 2px solid #d9cfb8;  /* width, style, colour */
  margin-bottom: 24px;        /* gap below the card */
}

/* Shorthands go clockwise: top right bottom left */
.tag {
  padding: 4px 12px;          /* top+bottom 4px, left+right 12px */
  margin: 0 0 8px 0;          /* only a bottom margin */
}

Perangkap kiraan lebar

Secara default (box-sizing: content-box), width hanya menetapkan content. Padding dan border ditambah di atasnya. Jadi kad ini sebenarnya bukan 300px lebar di skrin:

.card {
  width: 300px;
  padding: 24px;
  border: 2px solid;
}
/* on screen: 352px wide */

.card {
  box-sizing: border-box;
  width: 300px;
  padding: 24px;
  border: 2px solid;
}
/* on screen: 300px wide */

Sebab itulah hampir setiap stylesheet profesional bermula dengan reset kecil ini, supaya semua elemen guna border-box:

*,
*::before,
*::after {
  box-sizing: border-box;
}