CSS'da Box Model nima?

Savol

CSS'dagi bloklar modeli (box model) nimalardan iborat, content-box va border-box bir-biridan nimasi bilan farq qiladi va margin collapsing (tashqi otstuplarning qo'shilib ketishi) nima?

Qisqa javob

CSS'dagi har bir element — to'rtta qatlamdan iborat to'rtburchak: content → padding → border → margin. box-sizing xususiyati elementning berilgan kengligiga padding va border kiradimi yoki yo'qmi, shuni belgilaydi. Qo'shni bloklarning vertikal tashqi otstuplari bitta otstupga qo'shilib ketishi (collapse) mumkin.

Batafsil javob

Bloklar modeli — CSS'dagi renderlashning fundamental mexanizmi. Har bir elementda quyidagilar bor:

• content — mazmun joylashgan hudud (matn, rasm), o'lchami width/height orqali belgilanadi.
• padding — mazmun va chegara orasidagi ichki otstup, elementning foni bilan bo'yaladi.
• border — padding atrofidagi chegara.
• margin — tashqi otstup, elementni qo'shnilaridan ajratadi, shaffof va fon bilan bo'yalmaydi.

box-sizing elementning yakuniy o'lchami qanday hisoblanishini belgilaydi:

• content-box (standart) — width/height faqat mazmun hududining o'lchamini belgilaydi; padding va border ustiga qo'shiladi, blokning haqiqiy o'lchamini kattalashtiradi. Shu sababli padding qo'shilganda yakuniy kenglikni bashorat qilish qiyin.
• border-box — width/height padding va borderni o'z ichiga oladi; content ularga sig'ish uchun siqiladi. Bu intuitivroq, shuning uchun deyarli barcha CSS reset/normalize'lar butun hujjatni border-boxga o'tkazadi.

Margin collapsing (otstuplarning qo'shilib ketishi) — ikkita qo'shni blok elementning vertikal marginlari (yoki ota va uning birinchi/oxirgi farzandi orasida padding/border/content bo'lmasa, ular orasidagi marginlar) qo'shilib jamlanmaydi, balki ikkovidan kattarog'iga teng bo'lgan bitta marginga qo'shilib ketadi. Bu faqat hujjatning oddiy oqimidagi vertikal marginlar uchun ishlaydi; agar elementlarning overflowi visibledan farqli bo'lsa, ular flex/grid-konteynerda bo'lsa yoki marginlar orasida ularni ajratib turuvchi padding/border/content bo'lsa, bu yuz bermaydi.

Misol

/* border-box ga klassik reset */
*, *::before, *::after {
  box-sizing: border-box;
}

.card {
  width: 300px;       /* yakuniy kenglik = 300px, padding va border shu ichida */
  padding: 20px;
  border: 2px solid #333;
  margin: 16px;
}

/* margin collapsing misoli */
.section-a {
  margin-bottom: 40px;
}
.section-b {
  margin-top: 24px;
}
/* .section-a va .section-b orasidagi yakuniy otstup = 40px (40 va 24 dan katta bo'lgani), 64px emas */

Qo'shimcha savollar

• Qaysi hollarda margin collapsing yuz bermaydi?
• Otaning display: flex xususiyati farzandlarining otstuplari qo'shilib ketishiga qanday ta'sir qiladi?
• Nega border-box standart tanlov sifatida ko'proq bashorat qilinadigan hisoblanadi?