CSS box model nedir?

Question

Accepted Answer

CSS'deki her öğe, içten dışa doğru dört katmandan oluşan dikdörtgen bir **box**'tur: **content**, **padding**, **border** ve **margin**. Bunların nasıl birleştiğini anlamak tüm düzen tasarımının temelini oluşturur.

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

## Klasik hata: toplam genişlik

**Varsayılan** `box-sizing: content-box` ile, işlenen genişlik, ayarladığınız `width`'den *daha büyük*tür, çünkü padding ve border üzerine eklenir:

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

Bu başlangıçları şaşırtır — `width: 200px` ayarlarsınız ama 250px yer kaplayacaktır. Herkesin kullandığı çözüm:

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

## padding vs margin

- **padding** — sınır *içinde* alan; öğenin bir parçasıdır (tıklanabilir, arka plan rengini alır).
- **margin** — sınır *dışında* alan; saydam olup, bitişik dikey kenarboşluklar **çöker** (iki çatışan kenarboşlukta daha büyük olanı kazanır).

## Neden önemli

Box model öğelerin gerçekte ne kadar büyük olduğunu ve birbirlerinden ne kadar uzakta olduğunu belirler.

Varsayılan modelin padding/border'ı `width`'e eklediğini (ve `border-box`'un neden hemen hemen evrensel bir çözüm olduğunu) bilmek en yaygın düzen-boyutlandırma karışıklığını engeller.