Çfarë bën box-sizing: border-box?

Question

Accepted Answer

`box-sizing` kontrollon **se çfarë matni në të vërtetë vetitë `width` dhe `height`**. Parazgjedhja (`content-box`) mat vetëm përmbajtjen; `border-box` e bën ato të përfshijnë paddingu dhe kufirinë.

## Problemi me parazgjedhjen (content-box)

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

Me `content-box`, padding dhe kufiri **shtohen përmes** `width`, kështu që elementi përfundon më i gjerë se numri që vendosët. Kjo prishpet paraqitjet: një kuti `width: 50%` me padding e tejkalon 50% të saj.

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

Me `border-box`, `width` është gjerësia **përfundimtare** e vizatuar — padding dhe kufiri zbriten nga brenda. Numri që vendosët është madhësia që merrni, e cila është shumë më intuitive.

## Reseti universal

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

Hamë pothuajse çdo stil modern, kornizë dhe reset e zbatohet globalisht. Kjo e bën dimensionimin të parashikueshëm: `width: 50%` + padding qëndron saktësisht 50% i gjerë, dy kutia `width: 50%` ulen krah pas krahut pa tejkaluar, etj.

## Pse është e rëndësishme

`border-box` heq burimin më të zakonshëm të vështirësive të matematikës së paraqitjes — nevojën të shtoni mentalisht padding dhe kufirinë në çdo `width`.

Vendosja e tij globalisht konsiderohet si praksa më e mirë e parazgjedhur, sepse "gjerësia që vendosa është gjerësia që marr" është mënyra se si natyrshëm prisni të funksionojë dimensionimi.