Τι είναι το μοντέλο κιβωτίου CSS;

Question

Accepted Answer

Κάθε στοιχείο στο CSS είναι ένα ορθογώνιο **box** που αποτελείται από τέσσερα επίπεδα, από μέσα προς τα έξω: **content**, **padding**, **border** και **margin**. Η κατανόηση του τρόπου συνδυασμού τους είναι το θεμέλιο κάθε διάταξης.

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

## Η κλασική παγίδα: συνολικό πλάτος

Με το **προεπιλεγμένο** `box-sizing: content-box`, το απόδοσης πλάτος είναι *μεγαλύτερο* από το `width` που ορίσατε, επειδή το padding και το border προστίθενται στο επάνω:

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

Αυτό εκπλήσσει τους αρχάριους — ορίσατε `width: 200px` αλλά καταλαμβάνει 250px. Η λύση που χρησιμοποιούν όλοι:

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

## padding έναντι margin

- **padding** — χώρος *μέσα* στο περίγραμμα· είναι μέρος του στοιχείου (κλικτό, παίρνει χρώμα φόντου).
- **margin** — χώρος *έξω* από το περίγραμμα· διαφανές και τα γειτονικά κάθετα περιθώρια **καταρρέουν** (το μεγαλύτερο από τα δύο εφαπτόμενα περιθώρια κερδίζει).

## Γιατί έχει σημασία

Το μοντέλο κιβωτίου διέπει πόσο μεγάλα είναι πραγματικά τα στοιχεία και πόσο απέχουν το ένα από το άλλο.

Το να ξέρετε ότι το προεπιλεγμένο μοντέλο προσθέτει padding/border στο `width` (και γιατί το `border-box` είναι η σχεδόν καθολική λύση) αποτρέπει τη συχνότερη σύγχυση στον προσδιορισμό του μεγέθους της διάταξης.