CSS box model (margin, padding, border)

Brauzer har HTML elementini 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.

.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

<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>

<style>
.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; }
</style>

Padding va margin qisqa yozuvi

To’rt tomon alohida yozilishi mumkin:

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

Shorthand qiymatlar soat yo’nalishida ishlaydi:

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:

* {
  box-sizing: border-box;
}

.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.

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:

.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.

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 orqali qutilarning yangi qatorda yoki bir qatorda qanday oqishini o’rganamiz.