Cad a dhéanann box-sizing: border-box?

Question

Accepted Answer

Rialaíonn `box-sizing` **cad a thomhaiseann na hairíonna `width` agus `height` i ndáiríre**. Thomhaiseann an réamhshocrú (`content-box`) an t-ábhar amháin; déanann `border-box` iad a áireamh le stuaim agus imlíne.

## Cén fáth a bhíonn sé tábhachtach

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

Le `content-box`, cuirtear stuaim agus imlíne **ar bharr** an `width`, agus dá bharr sin bíonn an eilimint níos leithne ná an uimhir a shocraigh tú. Briseann sé leaganacha amach: bíonn bosca `width: 50%` le stuaim ag foluain thar a 50%.

## An fhéile: 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. */
```

Le `border-box`, is é `width` an **leithead deiridh** a dhéantar — baintear stuaim agus imlíne ó taobh istigh. Is é an uimhir a shocraigh tú an méid a gheobhaidh tú, agus tá sin i bhfad níos intuigthe.

## An athchur uilíoch

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

Cuireann beagnach gach stíleadlann nua-aimseartha, creatchló agus athchur seo i bhfeidhm go domhanda. Déanann sé tomhais inchurtha: `width: 50%` + stuaim fanann go díreach 50% ar leithead, suíonn dhá bhosca `width: 50%` taobh le taobh gan foluain, etc.

## Cén fáth a bhíonn sé tábhachtach

Baineann `border-box` an fhoinse is coitianta d'dhíobháil i ríomh-leagain — a bheith ag cur stuaim agus imlíne go meabhrach le gach leithead.

Tá a chur i bhfeidhm go domhanda is fearr-dhréachta a mheas, toisc go bhfuil "an leithead a shocraím an leithead a fhaighim" conas a bhraithíonn tú go nádúrtha go gcaithfidh tomhais oibriú.