Cad is modèl bosca CSS ann?

Question

Accepted Answer

Is bosca dronuilleogach **box** a bhíonn i ngach eilimint i CSS, déanta as ceithre shraith, ó bharr go goil: **content**, **padding**, **border**, agus **margin**. Is bunús an leagain ar fad a thuiscint conas a chumasc siad.

```text
┌─────────────── margin ───────────────┐  ← space OUTSIDE, between elements
│  ┌──────────── border ────────────┐  │
│  │  ┌───────── padding ────────┐  │  │  ← space INSIDE, around content
│  │  │       content            │  │  │  ← text/image (width × height)
│  │  └──────────────────────────┘  │  │
│  └─────────────────────────────────┘  │
└────────────────────────────────────────┘
```

```css
.box {
  width: 200px;      /* content width (in the default box model) */
  padding: 20px;     /* inner spacing — pushes content inward */
  border: 5px solid; /* the visible edge */
  margin: 10px;      /* outer spacing — separates from neighbors */
}
```

## An ghaois dhóchais: an leithead iomlán

Leis an **default** `box-sizing: content-box`, tá an leithead atá ann níos mó ná an `width` a shocraíonn tú, toisc go gcuirtear padding agus border ar bharr:

```text
Total width = 200 (content) + 2×20 (padding) + 2×5 (border) = 250px
```

Iontas ar thosaitheoirí — socraíonn tú `width: 200px` ach tugann sé suas 250px. An socrú a úsáideann gach duine:

```css
* { box-sizing: border-box; } /* now width INCLUDES padding + border → 200px total */
```

## padding i gcoinne margin

- **padding** — spás *istigh* den border; is cuid den eilimint a bhíonn ann (inchlikable, glacann sé dath an chúlra).
- **margin** — spás *amuigh* den border; trédhearcach, agus **titim** a dhéanann margin ingearacha cóngaracha (buaiteann an níos mó de dhá margin tadhlacha).

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

Rialann an modèl bosca an méid atá i ndáiríre ag eilimintí agus conas a fhspacáiltear iad.

A bheith ar an eolas gur cuirtear padding/border leis an `width` sa mhodèl réamhshocraithe (agus cén fáth go bhfuil `border-box` beagnach uilíoch) roinnt dá dhúshlánaitheach an mearbhall méide leagain is coitianta.