Menene box-sizing: border-box ke buƙata?

Question

Accepted Answer

`box-sizing` yana ƙunshi **abin da kadai `width` da `height` nasa suna auna kawai**. Chikakken zaɓi (`content-box`) yana auna abun ciki kaɗai; `border-box` yana gida jiya da konon.

## Me yake sa haka muhimmi

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

Tare da `content-box`, ajiyar jiya da konon ana ƙara **sama" `width`, don haka abin ya zama niyyar fiye da lambar da kuka saita. Wannan yana karya layouts: akwai `width: 50%` akwai jiya ko karamin giida ya ƙara jiya.

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

Tare da `border-box`, `width` shine **ƙarshe**  saiwon - ajiyar jiya da ƙofi ana cire cikin. Lambar da kuka saita shine adadin da kuke samu, wanda ke da kyau fiye.

## Mahallin jihar dunia

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

Kusan kowane saɓo sassauka, framework, da ƙarawa suna aiki wannan a baƙi. Yana da kyau adadin: `width: 50%` + jiya ramun shine tsawon 50% kaɗai, biyu `width: 50%` akwai suna zaune gefen juna ba tare da ijapawa, da sauransu.

## Me yake sa haka muhimmi

`border-box` yana cire mafi yawon raƙumman hadaddun tsarinsa — suna ƙara jiya da ƙofi zuwa kowa tsawon.

Saita shi a gida a zahiri ana ɗauka a azaman mafi kyawu zaɓi - saboda "tsawon da nake saita shine tsawon da nake samu" shine mene kuke sa sanin cewa yadda hadaddun adadi sike aiki.