რა არის CSS ყუთის მოდელი?

Question

Accepted Answer

CSS-ის ყველა ელემენტი არის მართკუთხა **ყუთი**, რომელიც შედგება ოთხი ფენისგან, შიგნიდან გარეთ: **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** — სივრცე *ზღვარის გარეთ*; გამჭვირვალე, და მიმდებარე ვერტიკალური მარჯნა **იშლება** (ორი შესაჯ margin-ის უფრო დიდი იმარჯება).

## რატომ არის ეს მნიშვნელოვანი

ყუთის მოდელი აკონტროლებს რამდენად დიდი არის ელემენტები ფაქტობრივად და როგორ იშორებიან ისინი ერთმანეთს.

ის გაგება, რომ ნაგულისხმევი მოდელი დოკუმენტებს ამატებს padding/border-ს `width`-ში (და რატომ არის `border-box` თითქმის საყოველთაო გამოსწორება) ხელს უშლის ყველაზე გავრცელებული განლაგების ზომის აბნობას.