# CSS box model (margin, padding, border)

> CSS box model qatlamlari — content, padding, border va margin; width hisoblash, box-sizing, shorthand, margin auto va collapse holatini jonli o'rganing.

Manba: https://learncode.uz/html-css/box-model/
Sana: 2026-05-21

Brauzer har [HTML elementini](https://learncode.uz/html-css/html-nima) to'rtburchak quti sifatida
joylashtiradi. Qutining mazmuni, ichki bo'shlig'i, chegarasi va tashqi
masofasi birgalikda **box model** deyiladi. Layoutdagi ko'p savol — nega
element kengaydi, nega qo'shni uzoqlashdi — shu model bilan tushuntiriladi.

## To'rt qatlam

Ichkaridan tashqariga qarab:

1. **content** — matn, rasm yoki boshqa mazmun;
2. **padding** — content bilan border orasidagi ichki bo'shliq;
3. **border** — qutining chegarasi;
4. **margin** — quti bilan qo'shni element orasidagi tashqi masofa.

```css
.card {
  width: 280px;
  padding: 24px;
  border: 2px solid #6366f1;
  margin: 20px;
}
```

Fon rang va fon rasmi content bilan padding hududini qoplaydi. Margin esa
element fonining bir qismi emas va doim tashqi masofa bo'lib qoladi.

## Jonli box model

```html
<div class="stage">
  <article class="card">
    <span>CONTENT</span>
    <h1>HTML va CSS</h1>
    <p>Padding matnni borderdan uzoqlashtiradi.</p>
  </article>
</div>

<p class="hint">Kulrang hudud — tashqi muhit, binafsha chiziq — border.</p>
```

```css
.stage {
  padding: 20px;
  background: #e2e8f0;
}
.card {
  max-width: 360px;
  margin: 16px auto;
  padding: 24px;
  border: 4px solid #6366f1;
  border-radius: 12px;
  background: #eef2ff;
  color: #1e1b4b;
}
.card span { font-size: 12px; font-weight: 800; }
.hint { color: #475569; }
```

## Padding va margin qisqa yozuvi

To'rt tomon alohida yozilishi mumkin:

```css
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
```

Shorthand qiymatlar soat yo'nalishida ishlaydi:

```css
padding: 10px;             /* barcha tomon */
padding: 10px 20px;        /* vertikal | gorizontal */
padding: 10px 20px 16px;   /* tepa | gorizontal | past */
padding: 10px 20px 16px 8px; /* tepa | o'ng | past | chap */
```

Margin ham shu tartibda yoziladi. `margin: 0 auto` kengligi cheklangan block
elementni gorizontal markazga joylashning oddiy usulidir.

## Width aslida qancha bo'ladi?

Standart `box-sizing: content-box` holatida `width` faqat content kengligini
belgilaydi. Yuqoridagi `280px` qutiga chap-o'ng 24px padding va 2px border
qo'shilsa, tashqi kenglik `280 + 48 + 4 = 332px` bo'ladi.

`border-box` width ichiga padding va borderni ham kiritadi:

```css
* {
  box-sizing: border-box;
}
```

```css
.card {
  width: 280px;
  padding: 24px;
  border: 2px solid;
  box-sizing: border-box;
}
```

Endi qutining bordergacha bo'lgan umumiy kengligi 280px. Ko'p loyihada global
`border-box` o'lcham hisobini ancha sodda qiladi.

> **Outline box modelga kirmaydi**
>
> `outline` border tashqarisida chiziladi, joy egallamaydi va qo'shni elementni
> surmaydi. U ko'pincha klaviatura fokusini ko'rsatish uchun ishlatiladi;
> fokus outline'ini sababsiz olib tashlamang.

## Margin collapse

Oddiy hujjat oqimidagi vertikal block marginlari ayrim holatda qo'shilmay,
kattaroq qiymatga **collapse** bo'ladi. Masalan, bir paragrafning pastki
`20px` margini va keyingisining yuqori `16px` margini orasida 36px emas,
20px masofa chiqishi mumkin.

Flex va Grid konteyneridagi element marginlari bunday collapse qilmaydi.
Kutilmagan vertikal masofada DevTools box model panelini tekshiring.

## Overflow va moslashuvchan kenglik

Qattiq width kichik ekranda sig'masligi mumkin. Ko'pincha quyidagi yondashuv
moslashuvchanroq:

```css
.card {
  width: 100%;
  max-width: 620px;
  box-sizing: border-box;
}
```

Element mavjud joyni egallaydi, ammo 620px dan oshmaydi. Rasm va uzun matn
kabi content ham minimal kenglikka ta'sir qilishi mumkin.

> **Margin bilan hamma narsani surmang**
>
> Bir elementni joyiga keltirish uchun tasodifiy katta yoki manfiy marginlar
> qo'shish layoutni boshqa ekranda buzishi mumkin. Avval ota layout, width,
> box-sizing va normal oqimni tekshiring.

## Amaliy mashq

Ikki bir xil karta yarating. Birinchisini `content-box`, ikkinchisini
`border-box` qiling; ikkalasiga bir xil width, padding va border bering.
DevTools `Computed` panelida yakuniy kenglikni solishtiring. So'ng kartani
`max-width` va `margin: 0 auto` bilan markazlang.

## Qisqacha xulosa

- Box model content, padding, border va margindan tuziladi.
- Padding ichki, margin tashqi masofani beradi.
- `content-box` widthga padding va border qo'shadi.
- `border-box` ularni belgilangan width ichida hisoblaydi.
- Vertikal marginlar ayrim normal-flow holatlarda collapse bo'ladi.

Keyingi darsda [display va joylashuv](https://learncode.uz/html-css/displey-joylashuv) orqali
qutilarning yangi qatorda yoki bir qatorda qanday oqishini o'rganamiz.