Apa sing ditindakake box-sizing: border-box?

Question

Accepted Answer

`box-sizing` ngontrol **apa sing sukatan asile dening properti `width` lan `height`**. Default (`content-box`) mung ngukur konten; `border-box` nggawe padina kalebu padding lan border.

## Mengapa iku 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! */
```

Karo `content-box`, padding lan border **ditambahake ing ndhuwur** `width`, dadi elemen kasebut dadi luwih jembar tinimbang nomer sing wis ditetapake. Iki ngrusak layout: kothak `width: 50%` karo padding ngluwar saka 50%.

## Solusi: 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. */
```

Karo `border-box`, `width` yaiku **final** width sing direnderake — padding lan border dikurangi saka nang jero. Nomer sing ditetapake yaiku ukuran sing dipindhah, sing luwih intuitif.

## Reset universal

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

Payon harping saiki stylesheet, framework, lan reset nerapake iki sacara global. Iki nggawe sizing bisa diprediksi: `width: 50%` + padding tetep wujud 50% jembar, rong kothak `width: 50%` lungguh ing pinggiring tanpa ngluwar, lan liya-liyane.

## Mengapa iku penting

`border-box` ngilangake panyebab paling umum saka headache ing layout-math — kudu nambahake mental padding lan border kanggo saben width.

Setingan global dianggep best-practice default, amarga "width sing ditenetapake yaiku width sing dipindhah" yaiku carane alam-alaman sing dikarepake ngenani caraning sizing bisa bisa kaya.