Apa yang dilakukan box-sizing: border-box?

Question

Accepted Answer

`box-sizing` mengontrol **apa yang sebenarnya diukur oleh properti `width` dan `height`**. Default (`content-box`) hanya mengukur konten; `border-box` membuatnya menyertakan padding dan border.

## Mengapa ini penting

```css
.box {
  box-sizing: content-box; /* the default */
  width: 200px;
  padding: 20px;
  border: 5px solid;
}
/* Rendered width = 200 + 2×20 + 2×5 = 250px  ← bigger than you asked for! */
```

Dengan `content-box`, padding dan border **ditambahkan di atas** `width`, sehingga elemen menjadi lebih lebar dari angka yang Anda tetapkan. Ini merusak tata letak: kotak `width: 50%` dengan padding meluap dari 50%-nya.

## Perbaikan: border-box

```css
.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid;
}
/* Rendered width = 200px TOTAL. Content shrinks to 150px to make room. */
```

Dengan `border-box`, `width` adalah lebar yang **dirender akhir** — padding dan border dikurangi dari dalam. Angka yang Anda tetapkan adalah ukuran yang Anda dapatkan, yang jauh lebih intuitif.

## Reset universal

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

Hampir setiap stylesheet modern, framework, dan reset menerapkan ini secara global. Ini membuat ukuran dapat diprediksi: `width: 50%` + padding tetap persis 50% lebar, dua kotak `width: 50%` berdampingan tanpa meluap, dll.

## Mengapa ini penting

`border-box` menghilangkan sumber paling umum dari sakit kepala matematika tata letak — harus secara mental menambahkan padding dan border ke setiap lebar.

Menetapkannya secara global dianggap sebagai standar praktik terbaik, karena "lebar yang saya tetapkan adalah lebar yang saya dapatkan" adalah cara Anda secara alami mengharapkan ukuran bekerja.