CSS box-sizing: border-box bilan o'lchamni to'g'ri hisoblash

Qisqacha: Boshlang'ich holatda (box-sizing: content-box) width faqat mazmunni o'lchaydi: width: 300px, 20 piksellik padding va 2 piksellik border bilan quti 344 piksel chiqadi. Agar box-sizing: border-box yozilsa, width chegaragacha bo'lgan butun qutini o'lchaydi: quti roppa-rosa 300, mazmun 256 ga qisqaradi. Shuning uchun deyarli har loyiha *, *::before, *::after { box-sizing: border-box; } qoidasi bilan boshlanadi. Margin ikkala holatda ham qutiga kirmaydi.

Bu darsda

• content-box va border-box farqini tushuntirasiz va ikkalasida o'lchamni hisoblaysiz.
• width: 100% bilan padding birga kelganda nega maydon otasidan chiqib ketishini bilasiz va tuzatasiz.
• Universal reset'ni yozasiz va unda nega ::before va ::after borligini tushuntirasiz.
• Meros orqali ishlaydigan ikkinchi variantni bilasiz va qaysi birini qachon tanlashni asoslaysiz.
• DevTools'da box-sizing va ikki xil "en"ni o'qiysiz.

Oldin bilishingiz kerak: Box model, Pseudo-elementlar, Meros va global kalit so'zlar, Specificity.

1. Nega bu kerak?

O'tgan darsda kartaga width: 240px yozdik — u ekranda 284 piksel chiqdi. Padding va border kenglikka qo'shildi.

Endi dizayner shunday deydi: "Karta eni 300 piksel. Ichida 20 piksel bo'sh joy, atrofida 2 piksellik ramka." Uning "300"i — ramkaning bir chetidan ikkinchi chetigacha. Siz esa width ga hisob-kitob natijasini yozishingiz kerak: 300 − 20 − 20 − 2 − 2 = 256. Ertaga dizayner padding'ni 24 ga o'zgartiradi — width ni qaytadan hisoblaysiz. Foizda esa hisoblab ham bo'lmaydi: width: 100% va padding: 1em birga kelsa, quti otasidan kengroq chiqadi.

Oshxonadagi muzlatkich uchun joyni eslang. Devorlar orasida 60 santimetr bo'sh joy bor. Siz do'konda muzlatkichning tashqi enini so'raysiz — eshigi va devorlari bilan. Sotuvchi faqat ichki kameraning enini aytsa, uyga olib kelganingizda muzlatkich joyiga sig'maydi.

CSS'ning boshlang'ich qoidasi — o'sha sotuvchi: u faqat ichki kamerani o'lchaydi. Bu darsda bitta xususiyat bilan uni "tashqi o'lcham" rejimiga o'tkazamiz.

2. Ikki xil hisob

2.1 box-sizing nima

box-sizing — width va height qutining qaysi qatlamigacha o'lchashini aytadigan xususiyat. Uning ikki qiymati bor:

• content-box (boshlang'ich qiymat) — width faqat mazmunni o'lchaydi. Padding va border tashqariga qo'shiladi.
• border-box — width border'ning tashqi chetigacha bo'lgan butun qutini o'lchaydi. Padding va border ichkariga joylanadi, mazmun esa qolgan joyni oladi.

Nomlarning o'zi ma'noni aytadi: "content-box" — "o'lcham mazmun qutisigacha", "border-box" — "o'lcham chegara qutisigacha".

2.2 Yonma-yon ko'ramiz

Ikki bir xil kartani olamiz. Farqi bitta: ikkinchisida box-sizing: border-box. Tepada — 300 piksellik qizg'ish o'lchov chizig'i:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-urgu: #b4461a;
  }
  div {
    width: 300px;
    height: 8px;
    margin-bottom: 12px;
    background-color: var(--rang-urgu);
  }
  .taom-karta {
    width: 300px;
    padding: 20px;
    border: 2px solid var(--rang-asosiy);
    margin-bottom: 12px;
    background-color: #d8ecd9;
  }
  .taom-karta + .taom-karta {
    box-sizing: border-box;
  }
</style>
<div></div>
<article class="taom-karta">content-box</article>
<article class="taom-karta">border-box</article>

Nimaga qarang: ikkala kartada width: 300px. Lekin birinchisi o'lchov chizig'idan o'ngga chiqib ketgan, ikkinchisi esa chiziq bilan roppa-rosa teng. Chrome'da o'lchadik: birinchi karta 344 piksel, ikkinchisi — 300.

"Tahrirlab ko'rish" tugmasini bosing va padding ni 20px dan 40px ga o'zgartiring. Birinchi karta yana 40 pikselga kengayadi. Ikkinchisi esa 300 da qoladi — faqat ichidagi yozuvga joy torayadi. Mana farqning mohiyati: border-box da tashqi o'lcham qat'iy, ichki joy moslashadi.

2.3 Hisob qoidalari

Bir xil qiymatlar — width: 300px; padding: 20px; border: 2px — ikki rejimda:

Ikki qoidani eslab qoling:

• content-box da qo'shasiz: ko'rinadigan en = width + ikki tomondagi padding + ikki tomondagi border.
• border-box da ayirasiz: mazmun eni = width − ikki tomondagi padding − ikki tomondagi border.

Margin ikkala rejimda ham hisobga kirmaydi. border-box — "border'gacha", margin esa border'dan tashqarida. Egallagan joy har doim: ko'rinadigan en + ikki tomondagi margin.

height ham xuddi shunday ishlaydi. min-width, max-width va boshqa o'lcham chegaralari ham box-sizing ga bo'ysunadi — ularni O'lchamlar darsida ko'rasiz.

2.4 Padding kenglikdan katta bo'lsa

border-box da mazmun eni manfiy bo'lolmaydi. width: 30px; padding: 20px; border: 2px — padding va border'ning o'zi 44 piksel. Chrome'da tekshirdik: mazmun 0 ga tushdi, quti esa 30 emas, 44 piksel chiqdi. Brauzer padding va border'ni qisqartirmaydi — width ni "buzadi". Bunday holat kichik ikonka yoki belgida uchraydi: padding'ni kamaytiring yoki width ni kattalashtiring.

2.5 Nega boshlang'ich qiymat noqulay tanlangan?

Savol tug'iladi: agar border-box shunchalik qulay bo'lsa, nega CSS content-box dan boshlanadi? Tarix sabab. CSS'ning birinchi standartlari width ni mazmun eni deb belgilagan. O'sha yillardagi Internet Explorer brauzeri esa ba'zi rejimlarda enni border bilan birga hisoblardi. Bir sahifa ikki brauzerda ikki xil o'lchamda chiqardi va dasturchilar buni "IE'ning box model xatosi" deb atashgan.

Keyinroq dasturchilar tushunib yetdi: "xato" hisob aslida qulayroq ekan. Shunda CSS'ga box-sizing xususiyati qo'shildi — endi hisob usulini muallif o'zi tanlaydi. Boshlang'ich qiymatni esa o'zgartirib bo'lmaydi: millionlab eski saytlar buzilib ketadi. CSS ishchi guruhi o'zining "CSS dizaynidagi xatolar ro'yxati"da ham shuni yozgan: box-sizing boshidanoq border-box bo'lishi kerak edi. Shuning uchun har loyiha bu tanlovni o'zi, bitta qoida bilan qiladi — uni pastda, «Universal reset» bo'limida yozamiz.

Tekshirib ko'ring: box-sizing: border-box; width: 200px; padding: 10px 16px; border: 4px solid; Mazmun eni necha piksel?

3. DevTools: ikki xil "en"

Ikkinchi kartani DevTools'da tanlang. Ikki joyda ikki xil son ko'rasiz:

• Computed → width: 300px. Bu width xususiyatining qiymati, border-box bo'yicha — ya'ni butun quti.
• Box model chizmasi, markazda: 256 × 18. Chizma markazi har doim mazmunni ko'rsatadi, box-sizing qanday bo'lishidan qat'i nazar.

Birinchi kartada esa ikkalasi bir xil: 300 va 300 × 18. Chrome'da tekshirdik — xuddi shunday. Ikki son farq qilsa, xato qidirmang: bu border-box belgisi. Computed ro'yxatida box-sizing qatori ham bor — shubha bo'lsa, avval shunga qarang.

4. width: 100% va padding: klassik tuzoq

4.1 Maydon formadan chiqib ketdi

«Bahor»ning bron formasida maydon va tugma butun enni egallasin. Ikkalasiga bir xil qoida yozamiz:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
  }
  form {
    width: 280px;
    padding: 12px;
    border: 2px dashed var(--rang-asosiy);
  }
  input,
  button {
    width: 100%;
    padding: 0.5em;
    border: 2px solid var(--rang-asosiy);
    font: inherit;
  }
</style>
<form action="https://example.com/bron" method="post">
  <p>
    <label for="ism">Ismingiz</label>
    <input id="ism" name="ism" type="text" autocomplete="name">
  </p>
  <button type="submit">Stolni band qilish</button>
</form>

Nimaga qarang: tugma formaning ichiga roppa-rosa sig'di. Maydon esa punktir chiziqdan o'ngga chiqib ketdi. Qoida bir xil-ku?

Chrome'da o'lchadik: formaning ichki eni 280 piksel. Tugma — 280, maydon — 300. Sababi — brauzer uslublari. Chrome tugmaga, select ga, radio va checkbox'ga box-sizing: border-box beradi. Matn maydoni (input) va textarea esa content-box da qoladi. Maydonga 100% — 280 piksel mazmun, ustiga 16 piksel padding va 4 piksel border: 300.

Telefonda bu gorizontal skrollga olib keladi: sahifa chapga-o'ngga surilib yuradi. Maydon formadan chiqqani ko'rinmasa ham, u ekran chetidan chiqib, butun sahifani kengaytirishi mumkin.

4.2 Tuzatish

Bitta qator yetadi — maydonlar ham tugma kabi border-box bo'lsin: input { box-sizing: border-box; }. Lekin har teg uchun alohida yozib chiqmaymiz. Keyingi bo'limdagi umumiy qoida — reset — hamma elementni birdan tuzatadi, shundan keyin maydon ham, tugma ham 280 piksel bo'ladi.

Viewport birliklari darsida header ning ichki bo'sh joyini ataylab uning bolalariga bergan edik. O'shanda "nega — Box model va box-sizing darslarida tushunasiz" degan edik. Mana sababi. min-height: 100svh va padding: 1rem birga yozilsa, content-box da blok ekrandan 32 piksel baland chiqadi. Chrome'da 600 piksellik ekranda tekshirdik: content-box bilan 632, border-box bilan 600. Reset'dan keyin padding'ni header ning o'ziga ham bersa bo'ladi.

Tekshirib ko'ring: content-box dagi div ga width: 100%; padding: 0 1rem; berildi. Otasining eni 360 piksel. div qancha joy egallaydi va nima bo'ladi?

5. Universal reset

5.1 Uch qatorli qoida

Har elementga birma-bir border-box yozmaymiz. Butun sahifa uchun bitta qoida:

*,
*::before,
*::after {
  box-sizing: border-box;
}

• * — hamma element (Asosiy selektorlar darsida "* ko'pincha boshlang'ich sozlashda uchraydi" degan edik — mana o'sha joy).
• *::before va *::after — hamma elementning pseudo-elementlari (Pseudo-elementlar).

Nega pseudo-elementlar alohida yozildi? Chunki * ularni tanlamaydi. Pseudo-element — element emas, u elementning "qo'shimcha bo'lagi". Chrome'da tekshirdik: faqat * { box-sizing: border-box; } yozilganda paragraf border-box bo'ldi, uning ::before qismi esa content-box da qoldi. ::before bilan chizilgan belgi yoki nishonga width va padding bersangiz, u kutilganidan katta chiqardi.

5.2 Nega bu yerda * yaxshi?

Meros darsida * { font-family: inherit; } yozishni yomon fikr degan edik: u code va pre ning shriftini buzardi. box-sizing bilan bunday muammo yo'q. Ikki sabab:

• Hech bir element content-box ga "muhtoj" emas. Tugmalar allaqachon border-box — biz qolganlarini ularga tenglashtiramiz.
• * ning og'irligi nol — (0,0,0) (Specificity). Biror element uchun boshqa qiymat kerak bo'lsa, oddiy teg selektori ham reset'ni yengadi.

5.3 Faylning boshida

«Bahor»ning assets/css/asosiy.css fayli endi shunday boshlanadi:

/* «Bahor» palitrasi */
:root {
  --rang-asosiy: #2f6b3a;
  --rang-asosiy-toq: #1a5d1a;
  --rang-urgu: #b4461a;
  --rang-fon: #fffaf0;
  --rang-matn: #1f2a24;
  --rang-ikkinchi: #5b6660;
}

/* O'lcham border'gacha hisoblansin */
*,
*::before,
*::after {
  box-sizing: border-box;
}

Tartib kaskad uchun muhim emas — bu qoidaga hech kim "raqobatchi" emas. Lekin fayl boshida turgani o'quvchiga aytadi: "bu loyihada hamma o'lcham border-box". Keyingi qoidalarni o'qiyotgan har kishi buni birinchi bo'lib ko'radi.

Qo'shgandan keyin sahifada nima o'zgaradi? width berilmagan bloklarda — hech narsa. Ular baribir otasining butun enini oladi, padding esa ichkariga joylanadi. O'zgarish faqat width yoki height aniq berilgan va padding yoki border'i bor elementlarda bo'ladi. Shuning uchun reset'ni mavjud loyihaga qo'shganda aynan shunday elementlarni tekshiring.

5.4 Va'da: menyu kartasiga ichki bo'sh joy

Matematik funksiyalar darsining mashqida kartaga width: min(100%, 22rem) bergan edik. Uning paragrafi chetga yopishib qolgan edi. "Kartaning o'ziga ichki bo'sh joy berishni box-sizing darsidan keyin qo'shamiz" degan edik. Nega kutdik? content-box da padding: 1em telefonda kartani 100% + 32 piksel qilardi — 360 piksellik ekranda 376 piksel, gorizontal skroll bilan. Reset bilan esa padding bemalol qo'shiladi:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-urgu: #b4461a;
  }
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  .taom-karta {
    width: min(100%, 22rem);
    padding: 0 1em;
    border: 2px solid var(--rang-asosiy);
  }
  .narx {
    color: var(--rang-urgu);
  }
</style>
<article class="taom-karta">
  <h3 class="taom-nomi">Lag'mon</h3>
  <p>Qo'lda cho'zilgan — <span class="narx">28 000 so'm</span></p>
</article>

Tugmalar bilan ekran enini almashtiring. Nimaga qarang: telefonda karta body ning ichki enini roppa-rosa egallaydi — 344 piksel, chegara va padding bilan birga. Kompyuterda u 352 pikselda (22rem) to'xtaydi. Matn endi chegaradan 1em uzoqda. width qiymatiga tegmadik — faqat padding qo'shildi.

6. Ikkinchi variant: meros orqali

6.1 Kod

Internetda reset'ning boshqa ko'rinishini ham uchratasiz:

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

Bu yerda border-box faqat html ga yoziladi. Qolgan hamma element inherit bilan otasining qiymatini oladi (Meros darsidagi kalit so'z). box-sizing o'zi meros bo'lib o'tmaydi — inherit uni majburan otadan oladi. Natijada zanjir: html → body → main → ... hammasi border-box.

6.2 Nega bunday murakkab?

Birinchi variantda har element o'zi border-box. Ikkinchisida — otasiga qaraydi. Bu farq bir vaziyatda foydali: sahifada content-box ga moslab yozilgan begona qism bo'lsa. Masalan, boshqa xizmatdan olingan eski xarita yoki chat vidjeti, uning CSS'i "padding kenglikka qo'shiladi" deb hisoblangan.

Ikkinchi variantda bunday qismni bitta qoida bilan eski rejimga qaytarasiz — uning ichidagi hamma element otadan content-box ni oladi:

aside {
  box-sizing: content-box;
}

Chrome'da tekshirdik: aside ichidagi (hatto div ichidagi) paragraf content-box bo'ldi, sahifaning qolgan qismi border-box da qoldi. Birinchi variantda esa aside ning har bir avlodini alohida sanab chiqish kerak bo'lardi. Bu yerda aside — shunchaki misol uchun "begona qism"ning o'rovchisi.

flowchart TD
  H["html<br/>border-box"] --> B["body — inherit<br/>border-box"]
  B --> M["main — inherit<br/>border-box"]
  B --> A["aside<br/>content-box"]
  A --> D["div — inherit<br/>content-box"]
  D --> P["p — inherit<br/>content-box"]

Nimaga qarang: har element otasiga qaraydi. Zanjirning bitta halqasi — aside — o'zgardi va undan pastdagi hamma element shu qiymatni oldi. main esa boshqa shoxda, u border-box da qoldi.

6.3 Qaysi birini tanlash

Halol javob: ikkalasi ham to'g'ri va ikkalasi ham keng tarqalgan.

• Meros varianti — begona content-box kodni bitta qoida bilan "ajratib qo'yish" uchun qulay. U CSS-Tricks kabi mashhur saytlar orqali tarqalgan.
• Oddiy variant — oddiyroq va oldindan aytib bo'ladigan. Har elementning o'lchami faqat o'ziga bog'liq, otasi qayerda ekaniga emas. Komponentni sahifaning boshqa joyiga ko'chirsangiz, uning o'lchami o'zgarmaydi. Bugun begona vidjetlarning ko'pchiligi o'zi border-box da yoziladi — ajratish kamdan-kam kerak bo'ladi. Shuning uchun zamonaviy resetlarning ko'pchiligi shu variantni tanlaydi (CSS reset darsida ularni solishtiramiz).

Kursda — «Bahor»da ham, portfolioda ham — oddiy variant. Asosiysi: loyihada bittasini tanlang va hamma joyda shuni ishlating. Ikkalasini aralashtirsangiz, o'lchamlar qaysi qoidaga bo'ysunishini topish qiyinlashadi.

Tekshirib ko'ring: Stajyor faqat html { box-sizing: border-box; } yozdi va inherit qatorini unutdi. Sahifadagi kartalar border-box bo'ladimi?

7. Ko'p uchraydigan xatolar

7.1 Pseudo-elementlar unutilgan

* { box-sizing: border-box; } — elementlar tuzaldi, ::before va ::after esa eski rejimda qoldi. Ular bilan chizilgan belgi va nishonlar kutilganidan katta chiqadi. Tuzatish: *, *::before, *::after.

7.2 Faqat html ga yozilgan

Meros variantining yarmi. Hech narsa o'zgarmaydi — box-sizing meros bo'lmaydi. Tuzatish: yo to'liq meros varianti (ikki qoida), yo oddiy variant.

7.3 "border-box da margin ham ichkarida"

Yo'q. border-box — border'gacha. width: 300px; margin: 20px; — quti 300, egallagan joy 340. Tuzatish: margin'ni har doim alohida qo'shing.

7.4 Ikki xil son — "qaysi biri to'g'ri?"

Computed'da width: 300px, chizma markazida 256. Ikkalasi ham to'g'ri: birinchisi — butun quti, ikkinchisi — mazmun («DevTools: ikki xil "en"» bo'limi). Tuzatish: avval box-sizing qatoriga qarang.

7.5 Reset qo'shildi — "hech narsa o'zgarmadi"

Bu yaxshi belgi. width siz bloklar o'zgarmaydi — «Faylning boshida» bo'limida ko'rdik. O'zgarishi kerak bo'lgan joy — aniq o'lchamli va padding'li elementlar, width: 100% li maydonlar. Tuzatish: hech narsa — faqat shunday elementlarni ko'zdan kechiring.

8. Mashqlar

Mashqlarni kurs/mashqlar/05/ papkasida bajaring.

1-mashq (oson): Ikki rejimda hisoblang

.aksiya {
  width: 280px;
  padding: 16px 24px;
  border: 4px solid #b4461a;
  margin: 12px;
}

• content-box da ko'rinadigan en — piksel.
• border-box da ko'rinadigan en — piksel.
• border-box da mazmun eni — piksel.
• border-box da egallagan en (margin bilan) — piksel.

Ishora: «Hisob qoidalari» jadvali — content-box da qo'shasiz, border-box da ayirasiz. Margin — har doim tashqarida.

2-mashq (o'rta): Bron formasining maydonlari

«Bahor»ning bron formasida har maydon o'z div ida turadi:

<form action="https://example.com/bron" method="post">
  <div>
    <label for="ism">Ismingiz</label>
    <input id="ism" name="ism" type="text"
           autocomplete="name" required maxlength="50">
  </div>
  <div>
    <label for="vaqt">Vaqt</label>
    <select id="vaqt" name="vaqt" required>
      <option value="">Vaqtni tanlang</option>
      <option value="18:00">18:00</option>
    </select>
  </div>
  <button type="submit">Stolni band qilish</button>
</form>

asosiy.css ga yozing:

1. Reset — oddiy variant.
2. input, select va tugma: butun en, 0.5em padding, 2px yaxlit chegara asosiy rangda, sayt shrifti.
3. Formaning eni ko'pi bilan 24rem.

Telefon enida (360 piksel) tekshiring: hech narsa formadan chiqmasin.

Ishora: 3-band — max-width (Matematik funksiyalar darsida min() bilan birga ko'rgan edingiz). Sayt shrifti — font: inherit (Meros).

<style>
  :root {
    --rang-asosiy: #2f6b3a;
  }
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  form {
    max-width: 24rem;
  }
  input,
  select,
  button {
    width: 100%;
    padding: 0.5em;
    border: 2px solid var(--rang-asosiy);
    font: inherit;
  }
</style>
<form action="https://example.com/bron" method="post">
  <div>
    <label for="ism">Ismingiz</label>
    <input id="ism" name="ism" type="text"
           autocomplete="name" required maxlength="50">
  </div>
  <div>
    <label for="vaqt">Vaqt</label>
    <select id="vaqt" name="vaqt" required>
      <option value="">Vaqtni tanlang</option>
      <option value="18:00">18:00</option>
    </select>
  </div>
  <button type="submit">Stolni band qilish</button>
</form>

3-mashq (qiyin): Begona vidjet

Sahifada meros varianti bilan reset yozilgan. Bir kuni sahifaga boshqa xizmatning ob-havo vidjeti qo'shildi. Uning CSS'i content-box ga moslab yozilgan va hozir sahifada buzilib ko'rinyapti. Vidjet <aside> ichida:

<aside>
  <div>
    <p>Toshkent: +18°</p>
  </div>
</aside>

1. Vidjetni eski rejimga qaytaradigan bitta qoida yozing.
2. Vidjet ichidagi p ga width: 200px; padding: 10px; border: 2px solid; berilgan. Uning ko'rinadigan eni qancha bo'ladi — qoida yozilishidan oldin va keyin?
3. Loyihada oddiy variant turganida xuddi shu ishni qilish uchun qanday selektor kerak bo'lardi?

Ishora: meros varianti zanjir bo'ylab ishlaydi — zanjirning bir halqasini o'zgartirsangiz, undan pastdagi hamma o'zgaradi («Nega bunday murakkab?» bo'limi).

aside {
  box-sizing: content-box;
}

aside,
aside *,
aside *::before,
aside *::after {
  box-sizing: content-box;
}

4-mashq: Portfolio qadami — reset va to'liq enli maydonlar

1. Portfolio asosiy.css ining boshiga, :root blokidan keyin reset qo'shing (oddiy variant).
2. Hamma sahifani ochib ko'ring. Biror joy o'zgardimi? Nega?
3. Aloqa formasi: matn maydonlari va textarea butun en bo'ylab, ichida 0.5em bo'sh joy bilan. Radio tugmalariga bu qoida tushmasin.
4. Telefon enida (360 piksel) aloqa sahifasini oching: maydonlar ustundan chiqmasligini tekshiring. Keyin reset'ni vaqtincha izohga oling va farqni o'lchang.

Ishora: 3-band — "radio emas" degan shart: input:not([type="radio"]) (Mantiqiy pseudo-klasslar). font: inherit Meros darsidan beri faylda bor — 0.5em sayt shriftidan hisoblanadi.

/* Portfolio palitrasi */
:root {
  /* ... ranglar darslaridagi o'zgaruvchilar ... */
}

/* O'lcham border'gacha hisoblansin */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Aloqa formasi: maydonlar butun en bo'ylab */
input:not([type="radio"]),
textarea {
  width: 100%;
  padding: 0.5em;
}

9. Real ishda

• Deyarli har loyiha shu reset bilan boshlanadi. GitHub, YouTube yoki istalgan katta saytda DevTools'ni oching va biror div ni tanlang — Computed'da box-sizing: border-box ni ko'rasiz.
• Tayyor resetlar va freymvorklar (Bootstrap, Tailwind — kursda alohida o'rganamiz) ham shu qatorlar bilan boshlanadi. Ularni CSS reset darsida ko'rasiz.
• Dizayn fayllari o'lchamni border bilan birga beradi. border-box bilan dizayndagi son kodga to'g'ridan-to'g'ri ko'chadi.
• Intervyuda so'raladi: "box-sizing: border-box nima qiladi?", "Nega reset'da ::before va ::after bor?", "width: 100% va padding nega gorizontal skroll beradi?".

Xulosa

• content-box (boshlang'ich): width — faqat mazmun, padding va border qo'shiladi.
• border-box: width — border'gacha butun quti, mazmun qolgan joyni oladi.
• Margin ikkala rejimda ham tashqarida.
• Chrome tugma, select, radio va checkbox'ni border-box, matn maydonlarini content-box qilib beradi — width: 100% shuning uchun maydonni chiqarib yuboradi.
• Reset: *, *::before, *::after { box-sizing: border-box; } — * pseudo-elementlarni tanlamaydi.
• Meros varianti (html + inherit) begona qismni ajratishga qulay; kursda — oddiy variant.

Keyingi dars: Margin sirlari — nega 40 + 16 piksel margin 40 bo'lib qoladi, manfiy va auto margin nima qiladi.

Manbalar

• MDN: "box-sizing", "The box model" — developer.mozilla.org
• W3C: "CSS Basic User Interface Module Level 3", box-sizing bo'limi — w3.org/TR/css-ui-3
• CSS-Tricks: "Box Sizing" — css-tricks.com
• CSS ishchi guruhi: "Incomplete List of Mistakes in the Design of CSS" — wiki.csswg.org/ideas/mistakes