Kas yra CSS langelio modelis?

Question

Accepted Answer

Kiekvienas CSS elementas yra stačiakampis **langelis**, sudarytas iš keturių sluoksnių, iš vidaus į išorę: **content**, **padding**, **border** ir **margin**. Supratimas, kaip jie sujungiami, yra visų maketų pagrindas.

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

## Klasikinis spąstai: bendra plotis

Su **numatytuoju** `box-sizing: content-box`, atvaizduotas plotis yra *didesnis* nei jūsų nustatytas `width`, nes padding ir border pridedami viršuje:

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

Tai nustebina pradedančiuosius — jūs nustatėte `width: 200px`, tačiau jis užima 250px. Taisymas, kurį visi naudoja:

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

## padding vs margin

- **padding** — vieta *ribos viduje*; yra elemento dalis (spustelėjama, paima fono spalvą).
- **margin** — vieta *ribos išorėje*; skaidri, o gretimos vertikalios paraštės **sugriaunamos** (didesnė iš dviejų liečiamų maržų laimi).

## Kodėl tai svarbu

Langelio modelis valdo, kokį dydį iš tikrųjų turi elementai ir kaip jie atsiriboja vienas nuo kito.

Žinodami, kad numatytasis modelis prideda padding/border prie `width` (ir kodėl `border-box` yra beveik universalus pataisymas), išvengiame dažniausiai pasitaikančios maketų dydžio painiavos.