CSS box model: content, padding, border va margin

Qisqacha: Brauzer sahifadagi har elementni to'rtburchak quti qilib chizadi. Quti to'rt qatlamdan iborat: o'rtada mazmun (content), uning atrofida ichki bo'sh joy (padding), keyin chegara (border) va eng tashqarida tashqi bo'sh joy (margin). Element foni mazmun va padding ostiga tushadi, margin esa doim shaffof. Elementning ekranda egallagan joyi — to'rt qatlamning yig'indisi: width 240, padding 16, border 6 va margin 24 bo'lsa, quti 332 piksel joy oladi.

Bu darsda

• Har element to'rt qatlamli quti ekanini tushuntirasiz va har qatlamni nomi bilan ayta olasiz.
• Padding, border va margin'ni natijada ham, DevTools chizmasida ham ajratasiz.
• Quti ekranda qancha joy egallashini qo'lda hisoblaysiz.
• Bo'sh joyni kerakli tomonga qisqa va to'liq yozuv bilan berasiz.
• Brauzerning standart bo'sh joylarini taniysiz va bo'sh teg yoki   o'rniga CSS ishlatasiz.

Oldin bilishingiz kerak: CSS nima (qisqa yozuv), O'lcham birliklari, Chrome DevTools I, DevTools'da CSS.

1. Nega bu kerak?

Asosiy selektorlar darsida * { outline: ... } hiylasini ko'rgan edingiz. Sahifadagi har element — header ham, h1 ham, hatto kichkina strong ham — to'rtburchak ichida chiqdi. Bu tasodif emas. Brauzer uchun sahifada doira ham, yulduz ham yo'q — faqat qutilar bor.

Endi «Bahor» menyusiga qarang. Jasur aka ikki narsadan norozi. Birinchisi: kartadagi yozuv ramkaga yopishib turibdi. Ikkinchisi: kartalar bir-biriga tegib turibdi. Ikkalasi ham "bo'sh joy yo'q" muammosi. Lekin bu ikki xil bo'sh joy: biri karta ichida, ikkinchisi kartalar orasida. CSS'da ular ikki xil xususiyat bilan beriladi. Qaysi biri qayerda ekanini bilmasangiz, bo'sh joy noto'g'ri tomonga qo'shiladi.

Chrome DevTools I darsida rangli to'rtburchaklar chizmasini ko'rib, "box model'ni CSS qismida batafsil o'rganamiz" degan edik. O'sha payt keldi. O'sha darsdagi o'xshatishni davom ettiramiz: choyxona devoridagi ramkali surat. Suratning o'zi, uning atrofidagi oq qog'oz hoshiya, yog'och ramka va qo'shni suratgacha bo'lgan devor. CSS qutisi ham aynan shu to'rt qatlamdan iborat.

2. Qutining to'rt qatlami

2.1 Ichkaridan tashqariga

Quti modeli (box model) — brauzer har elementni qanday qutiga aylantirishini aytadigan qoidalar. Dasturchilar uni inglizcha "box model" deb ataydi, biz ham shunday deymiz. Qatlamlar ichkaridan tashqariga:

• Mazmun (content) — elementning o'zi: matn, rasm, ichki elementlar. Ramkadagi surat. Uning eni va bo'yi width va height bilan beriladi.
• Ichki bo'sh joy (padding) — mazmun bilan chegara orasidagi joy. Surat atrofidagi oq hoshiya. Element foni shu yerga ham yoyiladi.
• Chegara (border) — qutining chizig'i. Yog'och ramka. U ham joy egallaydi: 6 piksellik chegara qutini har tomondan 6 pikselga kattalashtiradi.
• Tashqi bo'sh joy (margin) — chegaradan tashqaridagi joy, qo'shni elementlargacha. Suratlar orasidagi devor. U doim shaffof: element foni bu yerga tushmaydi, orqada otaning foni ko'rinadi.

Kodda nomlar inglizcha: padding, border, margin. Darsda ham ularni shunday ataymiz — ishda ham shunday gapiriladi. "Mazmun" o'rniga ko'pincha "content" deyiladi.

2.2 To'rt qatlamni ko'ramiz

Margin shaffof bo'lgani uchun uni ko'rish qiyin. Shuning uchun kartani section ichiga qo'yamiz va section ni to'q sariqqa bo'yaymiz. Kartaning ichidagi paragrafga esa havorang fon beramiz — u mazmunni ko'rsatadi:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
  }
  section {
    background-color: #fde2c4;
    border: 1px dashed #b4461a;
  }
  .taom-karta {
    width: 240px;
    margin: 24px;
    border: 6px solid var(--rang-asosiy);
    padding: 16px;
    background-color: #d8ecd9;
  }
  .taom-karta p {
    margin: 0;
    background-color: #cfe3f7;
  }
</style>
<section>
  <article class="taom-karta">
    <p>Osh — 35 000 so'm</p>
  </article>
</section>

Nimaga qarang, tashqaridan ichkariga:

• To'q sariq maydon — section ning foni. Karta uning chetlaridan 24 piksel uzoqda turibdi. Bu — kartaning margin'i. Karta u yerni bo'yamadi, biz otaning fonini ko'ryapmiz.
• Qalin yashil chiziq — 6 piksellik border.
• Och yashil hoshiya — 16 piksellik padding. Kartaning foni shu yerni ham qopladi.
• Havorang yo'lak — mazmun, ya'ni p ning o'zi. Uning eni roppa-rosa 240 piksel.

"Tahrirlab ko'rish" tugmasini bosing va padding ni 16px dan 40px ga o'zgartiring. Och yashil hoshiya kengayadi, havorang mazmun esa o'z enida qoladi. Keyin margin ni o'zgartiring — endi karta atrofidagi to'q sariq maydon o'zgaradi, kartaning o'zi emas.

2.3 DevTools'dagi chizma

Xuddi shu qutini DevTools ham chizadi. Natijani sahifaga qo'yib, F12 ni bosing va Elements panelida article ni tanlang. Styles ro'yxatining eng pastida (Computed yorlig'ining esa tepasida) box model chizmasi turadi:

• tashqi to'q sariq qatlam — margin, har tomonda 24;
• sariq qatlam — border, 6;
• yashil qatlam — padding, 16;
• o'rtadagi ko'k to'rtburchak — mazmun: 240 × 18.

Mazmun bo'yi 18 piksel — bitta qator matn. U shriftga qarab o'zgaradi, siz boshqa son ko'rishingiz mumkin. Chizmadagi har qatlam ustiga sichqonchani olib borsangiz, sahifada o'sha qatlam shu rangda bo'yaladi. Songa ikki marta bossangiz, uni shu yerning o'zida o'zgartirasiz (DevTools'da CSS).

Natijadagi ranglarni ataylab DevTools'nikiga o'xshatdik. Endi istalgan saytda chizmaga qarab "bu bo'sh joy — margin'mi yoki padding'mi?" degan savolga bir soniyada javob berasiz.

Tekshirib ko'ring: Kartaga background-color: #d8ecd9 berdik. Karta qatlamlaridan qaysilari shu rangda bo'yaladi va qaysi biri bo'yalmaydi?

3. Quti qancha joy egallaydi

3.1 Qatlamlarni qo'shamiz

Kartaga width: 240px yozdik. Lekin ekranda u qancha joy oladi? Chapdan o'ngga barcha qatlamlarni qo'shamiz:

chap margin     24
chap border      6
chap padding    16
mazmun         240
o'ng padding    16
o'ng border      6
o'ng margin     24
──────────────────
jami           332

Ikki xil son bor va ikkalasi ham kerak:

• Ko'rinadigan en — border'ning bir chetidan ikkinchi chetigacha: 240 + 16 + 16 + 6 + 6 = 284 piksel. Ko'z shuni "karta" deb ko'radi.
• Egallagan joy — margin bilan birga: 284 + 24 + 24 = 332 piksel. Qo'shni elementlar shuncha joyni hisobga oladi.

Bo'yi ham xuddi shunday: mazmun 18, padding 32, border 12 — ko'rinadigan bo'y 62 piksel. Margin bilan — 110. Chrome'da o'lchadik: karta 284 × 62 chiqdi, section esa 112 piksel baland. 110 — ichidagi karta, 2 piksel — section ning o'z chegarasi: tepada 1, pastda 1.

3.2 width faqat mazmunga tegishli

E'tibor bering: siz 240 dedingiz, karta 284 chiqdi. Bu xato emas. CSS'ning boshlang'ich qoidasi shunday: width va height faqat mazmun qatlamini o'lchaydi. Padding va border ularning ustiga qo'shiladi.

Bu qoida ko'p noqulaylik tug'diradi. Dizayner "karta eni 300 piksel" desa, u chegara bilan birgalikdagi enni nazarda tutadi. Siz esa har safar padding va border'ni ayirib hisoblashingiz kerak bo'ladi. Buni bitta qator bilan o'zgartirish mumkin — keyingi darsning asosiy mavzusi. Hozircha qo'shib hisoblashni o'rganing: qatlamlarni tushunmasangiz, keyingi darsdagi yechim ham sehrga o'xshab qoladi.

Tekshirib ko'ring: width: 300px; padding: 10px 20px; border: 2px solid; margin: 12px; Qutining ko'rinadigan eni — [:344] piksel, egallagan joyi — [:368] piksel.

4. Padding: ichki bo'sh joy

4.1 Fon va bosiladigan joy padding'ga yoyiladi

Padding elementning o'ziga tegishli. Shuning uchun element foni uning ostiga ham tushadi. "Fonli joyni kattalashtirish" kerak bo'lsa — bu padding ishi.

Yana bir muhim fakt: padding bosiladi, margin bosilmaydi. Chrome'da tekshirdik: havolaning padding qismiga bosilsa, havola ishlaydi. Margin qismiga bosilsa — hech narsa bo'lmaydi, bosish havolaning otasiga tushadi. «Bahor»dagi "Stolni band qilish" havolasi — bron-havola class'i — shunday bezaladi:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-fon: #fffaf0;
  }
  .bron-havola {
    padding: 0.5em 1em;
    background-color: var(--rang-asosiy);
    color: var(--rang-fon);
  }
</style>
<p><a href="bron/">Stolni band qilish</a> — paddingsiz</p>
<p><a class="bron-havola" href="bron/">Stolni band qilish</a></p>

Nimaga qarang: birinchi havola — oddiy matn, bosish uchun faqat harflarning o'zi bor. Ikkinchisi yashil to'rtburchakka aylandi: matn atrofida yarim em tepada va pastda, bir em chapda va o'ngda bo'sh joy bor. Bu yashil maydonning hammasi bosiladi. Telefonda barmoq bilan bosadigan odam uchun bu katta farq. Bosiladigan joyning eng kichik o'lchamini O'lchamlar darsida ko'ramiz.

Havola — satr ichidagi element. Uning tepa va pastki padding'i fonni kattalashtiradi, lekin qo'shni qatorlarni surmaydi. Buni display darsida tushuntiramiz. Hozircha bunday havolani alohida paragrafga qo'ying — natijadagidek.

4.2 Qisqa va to'liq yozuv

CSS nima darsida padding ning qisqa yozuvini ko'rgan edingiz: bittadan to'rttagacha qiymat, tepadan boshlab soat mili bo'yicha. Bitta foydali qo'shimcha: tushirib qoldirilgan tomon ro'parasidagi tomondan oladi.

• padding: 8px 16px 12px — chap tomon yozilmagan. U ro'parasidagi o'ng tomondan oladi: 16.
• padding: 8px 16px — past va chap yozilmagan. Past tepadan (8), chap o'ngdan (16) oladi.
• padding: 8px — uchala tomon tepadan oladi.

Faqat bitta tomon kerak bo'lsa — to'liq yozuv: padding-top, padding-right, padding-bottom, padding-left. Masalan, faqat chapdan joy tashlash uchun padding-left: 1em. CSS nima darsidagi tuzoqni eslang: qisqa yozuv to'liq yozuvdan keyin kelsa, uni bekor qiladi.

Yana ikkita qisqa yozuv bor: padding-inline (chap va o'ng birga) va padding-block (tepa va past birga). Ular matn yo'nalishiga moslashadi — Mantiqiy xususiyatlar darsida to'liq ko'ramiz.

4.3 Qiymatlar

• Manfiy padding bo'lmaydi. padding: -8px — brauzer bu qatorni tashlab ketadi (Chrome'da tekshirdik). Ichki bo'sh joy "manfiy" bo'lolmaydi.
• Foiz — otaning enidan. Tepa va past padding ham (O'lcham birliklari darsidagi kutilmagan qoida).
• em qulay. Karta shrifti kattalashsa, ichidagi bo'sh joy ham birga o'sadi. O'lcham birliklari darsidagi maslahat shu edi: tugma va karta ichidagi bo'sh joy — em yoki rem da.

Tekshirib ko'ring: padding: 4px 12px 8px; yozildi. Chap tomondagi padding necha piksel?

5. Border: chegara ham joy egallaydi

Chegaraning uslublari, burchaklari va soyalari — Chegara va soyalar darsining mavzusi. Bu darsda bitta narsa muhim: border qutining bir qismi va joy egallaydi.

Asosiy selektorlar darsidagi * { outline: ... } hiylasi aynan shuning uchun border bilan emas, outline bilan qilinadi. Farqini ko'ring:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
  }
  .taom-karta {
    width: 200px;
    padding: 12px;
    margin-bottom: 20px;
    background-color: #d8ecd9;
    border: 6px solid var(--rang-asosiy);
  }
  .taom-karta + .taom-karta {
    border: none;
    outline: 6px solid var(--rang-asosiy);
  }
</style>
<article class="taom-karta">Border bilan</article>
<article class="taom-karta">Outline bilan</article>

Nimaga qarang: ikkala karta bir xil kattalikda ko'rinadi. Lekin ikkinchisi 6 piksel chapga chiqib turibdi, kartalar orasidagi bo'shliq ham 20 emas, 14 piksel. Chrome'da o'lchadik: birinchi quti 236 piksel (200 + 24 + 12), ikkinchisi — atigi 224 (200 + 24). Border qutining ichida, u o'lchamga qo'shildi. outline esa qutining tashqarisiga — body ning margin'i va kartalar orasidagi bo'shliq ustiga chizildi. U hech narsani surmadi, lekin qo'shni joylarga chiqib ketdi.

Qoida: joylashuvni tekshirish uchun outline — u hech narsani surmaydi. Dizayndagi ramka uchun border — va uni o'lchamga qo'shib hisoblang.

6. Margin: tashqi bo'sh joy

6.1 Margin — qutilar orasidagi joy

Margin qutini qo'shnilaridan uzoqlashtiradi. Qisqa va to'liq yozuvi padding bilan bir xil: margin: 8px 16px, margin-top, margin-bottom va boshqalar. Farqlari:

• Shaffof. Fon unga tushmaydi — «To'rt qatlamni ko'ramiz» natijasidagi to'q sariq maydonni eslang.
• Bosilmaydi. Padding bo'limida tekshirgan edik: margin qismiga bosish elementga tegmaydi.
• Manfiy bo'lishi mumkin. Manfiy margin elementni qo'shnisiga yaqinlashtiradi, hatto ustiga chiqaradi.
• auto bo'lishi mumkin. margin: 0 auto ni Matematik funksiyalar darsida blokni o'rtaga qo'yish uchun ishlatgan edingiz.
• Tepa va pastki marginlar qo'shilib ketishi mumkin. Buni pastda o'z ko'zingiz bilan ko'rasiz.

Manfiy, auto va "qo'shilib ketadigan" margin'lar — Margin sirlari darsining mavzusi. Bu darsda oddiy, musbat margin bilan ishlaymiz.

6.2 Brauzer qo'ygan bo'sh joylar

Siz hali hech narsa yozmagan sahifada ham bo'sh joylar bor. Ularni brauzer uslublari beradi (CSS nima darsida). Chrome'da o'lchadik:

Shu sabab CSS'siz sahifada matn oyna chetiga yopishmaydi (body ning 8 pikseli), ro'yxat belgilari esa chapda joy topadi (ul ning 40 piksellik padding'i). Eslang: Viewport birliklari darsida yashil blok atrofida oq chiziq qolmasin deb body { margin: 0; } yozgan edingiz — o'sha 8 piksel edi. Bu standart qiymatlarni butun loyiha bo'yicha tekislashni CSS reset darsida o'rganamiz.

6.3 HTML qismidagi ikki va'da

HTML qismida ikki marta "oraliq — CSS ishi" degan edik:

• Sarlavhalar va paragraflar darsida paragraflar orasiga katta joy tashlash uchun bo'sh <p></p> qo'ymaslikni aytgan edik.
• Bo'sh joylar darsida Osh    35 000 kabi "surish"ni taqiqlagan edik.

Mana to'g'ri yo'l:

<style>
  :root {
    --rang-urgu: #b4461a;
  }
  p {
    margin-bottom: 2.5em;
  }
  .narx {
    margin-left: 2em;
    color: var(--rang-urgu);
  }
</style>
<p>Osh tayyor. <span class="narx">35 000 so'm</span></p>
<p>Kabob ham tayyor.</p>

Nimaga qarang: paragraflar orasida katta bo'shliq bor, narx esa nomdan ancha o'ngda. HTML'da bitta ham bo'sh teg yoki   yo'q — ma'no HTML'da, oraliq CSS'da.

Chrome'da o'lchadik: paragraflar orasidagi bo'shliq — 40 piksel. Lekin to'xtang: birinchi paragrafning pastki margin'i 40 piksel (2.5 × 16). Ikkinchisining tepasida esa brauzer bergan 16 piksel bor. Nega 56 emas? Bu — vertikal margin'larning "qo'shilib ketishi". Uning qoidalarini Margin sirlari darsida ochamiz.

span ga margin-left berdik va u ishladi. Lekin satr ichidagi elementga margin-top bersangiz, hech narsa o'zgarmaydi — Chrome'da tekshirdik. Nega shunday ekanini display darsida ko'rasiz.

Tekshirib ko'ring: Kartadagi yozuv ramkaga yopishib turibdi. Stajyor kartaga margin: 1em berdi — yozuv baribir yopishib qoldi. Nega va nima yozish kerak edi?

7. Ko'p uchraydigan xatolar

7.1 Fonli joy kerak edi, margin berildi

Tugmani kattaroq va rangliroq qilmoqchisiz, margin yozasiz — tugma surildi, lekin kattalashmadi. Fon va bosiladigan joy margin'ga tushmaydi. Tuzatish: padding.

7.2 Qiymatlar tartibi adashdi

margin: 0 16px 8px — "chapda 0" deb o'ylaysiz. Aslida chap tomon ro'parasidagi o'ngdan oladi: 16. Tuzatish: qiymatlarni soat mili bo'yicha o'qing — tepa, o'ng, past, chap. Tushirib qoldirilgan tomon ro'parasidan oladi.

7.3 Manfiy padding

padding: -8px — deklaratsiya jim tashlanadi, DevTools uni ogohlantirish bilan ko'rsatadi (DevTools'da CSS). Tuzatish: padding faqat 0 yoki musbat. Elementni yaqinlashtirish kerak bo'lsa — manfiy margin (Margin sirlari).

7.4 "Kenglikni aniq berdim, lekin quti kattaroq chiqdi"

width: 300px; padding: 20px; border: 2px solid; — ekranda 344 piksel. Bu xato emas, «width faqat mazmunga tegishli» qoidasi. Tuzatish: hozircha qo'shib hisoblang. Keyingi darsda bu qoidani bitta qator bilan o'zgartiramiz (box-sizing).

7.5 Bo'sh joy uchun teg yoki belgi

Bo'sh <p></p>, ketma-ket <br> yoki     — ekran o'quvchi ularni "bo'sh" deb o'qiydi, telefonda esa matn buziladi. Tuzatish: oraliqni margin yoki padding bilan bering.

8. Mashqlar

Mashqlarni kurs/mashqlar/05/ papkasida bajaring.

1-mashq (oson): Kalkulyatorsiz hisoblang

.taom-karta {
  width: 200px;
  padding: 12px 20px;
  border: 3px solid #2f6b3a;
  margin: 16px;
}

• Ko'rinadigan en — piksel.
• Egallagan en (margin bilan) — piksel.
• Mazmun ramkadan necha piksel uzoqda, chapda — [:20], tepada — [:12].

Ishora: «Qatlamlarni qo'shamiz» bo'limidagi ustunni takrorlang. padding ning ikki qiymati — "tepa-past, chap-o'ng".

2-mashq (o'rta): Menyu kartalari nafas olsin

«Bahor» menyusining ikki kartasi:

<article class="taom-karta">
  <h3 class="taom-nomi">Osh</h3>
  <p>Narxi: <span class="narx">35 000 so'm</span></p>
</article>
<article class="taom-karta">
  <h3 class="taom-nomi">Lag'mon</h3>
  <p>Narxi: <span class="narx">28 000 so'm</span></p>
</article>

asosiy.css ga yozing:

1. Kartada 2px yaxlit chegara — asosiy rangda.
2. Yozuv chegaradan tepa va pastda 0.5em, chap va o'ngda 1em uzoqda bo'lsin.
3. Kartalar orasida 1.5rem bo'sh joy.
4. Narx "Narxi:" so'zidan 0.5em o'ngroqda turadi.

Ishora: 2-band — ramka ichidagi joy, 3-band — ramkalar orasidagi joy. 4-band uchun: satr ichidagi elementga (span) faqat chap-o'ng margin ishlaydi — «HTML qismidagi ikki va'da» bo'limida ko'rdik. Ranglar — «Bahor» palitrasidagi --rang-asosiy va --rang-urgu (CSS o'zgaruvchilari).

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-urgu: #b4461a;
  }
  .taom-karta {
    border: 2px solid var(--rang-asosiy);
    padding: 0.5em 1em;
    margin-bottom: 1.5rem;
  }
  .narx {
    margin-left: 0.5em;
    color: var(--rang-urgu);
  }
</style>
<article class="taom-karta">
  <h3 class="taom-nomi">Osh</h3>
  <p>Narxi: <span class="narx">35 000 so'm</span></p>
</article>
<article class="taom-karta">
  <h3 class="taom-nomi">Lag'mon</h3>
  <p>Narxi: <span class="narx">28 000 so'm</span></p>
</article>

3-mashq (qiyin): Chizmadan kodni tiklang

Hamkasbingiz DevTools'dagi box model chizmasining rasmini yubordi. Unda shunday sonlar:

• margin: tepada 0, o'ngda 16, pastda 24, chapda 16;
• border: har tomonda 2;
• padding: tepa va pastda 8, chap va o'ngda 24;
• mazmun: 300 × 40.

1. Shu qutini beradigan CSS qoidasini yozing. Har xususiyat uchun eng qisqa yozuvni tanlang.
2. Qutining ko'rinadigan eni va bo'yini hisoblang.
3. U sahifada qancha en va bo'y egallaydi?

Ishora: margin'da uchta qiymat yetadi — chap va o'ng bir xil. Bo'y ham height bilan beriladi (O'lcham birliklari).

.taom-karta {
  width: 300px;
  height: 40px;
  padding: 8px 24px;
  border: 2px solid #2f6b3a;
  margin: 0 16px 24px;
}

4-mashq: Portfolio qadami — kartalar orasida joy

Portfoliongizning loyihalar sahifasida kartalar bir-biriga tegib turibdi: ikkala article ning chegaralari yopishgan. Aloqa sahifasidagi savol-javob bloklari ham shunday.

1. Loyiha kartalari (h1 ~ article) orasida 1.5rem joy qoldiring.
2. Savol-javob bloklari (details[name="savollar"]) orasida 0.5rem joy qoldiring.
3. Loyihalar sahifasini telefon enida (DevTools qurilma rejimi, 360 piksel) oching. Birinchi kartani tanlang va box model chizmasidan sonlarni yozib oling: mazmun eni, padding, border, margin. Ko'rinadigan enni qo'lda hisoblang va DevTools'dagi natija bilan solishtiring.

Ishora: o'tgan darslardagi h1 ~ article va details[name="savollar"] qoidalariga bittadan qator qo'shiladi. Chegaralar orasidagi joy — ramka tashqarisida.

h1 ~ article {
  border: 1px solid var(--rang-chegara);
  padding: 0.25em 1em;
  margin-bottom: 1.5rem;
}

details[name="savollar"] {
  border: 1px solid var(--rang-chegara);
  padding: 0.25em 0.75em;
  margin-bottom: 0.5rem;
}

9. Real ishda

• DevTools chizmasi — kundalik asbob. "Nega bu tugma pastga tushib ketdi?", "Nega matn ramkaga yopishgan?" — birinchi qadam doim elementni tanlab, box model'ga qarash.
• Dizayn fayllarida (Figma, kursda alohida o'rganamiz) masofalar "padding" va "spacing" deb yoziladi. Dasturchi ularni aynan shu qatlamlarga o'giradi.
• Masofalar tizimi. Katta loyihalarda bo'sh joylar tasodifiy sonlar emas: 4, 8, 12, 16, 24, 32 kabi tayyor shkaladan olinadi. Buni Spacing tizimi darsida ko'rasiz.
• Intervyuda birinchi CSS savollaridan biri: "Box model nima?", "Padding va margin farqi?". Endi javobingiz tayyor: to'rt qatlam, fon qayerga tushadi, nima bosiladi.

Xulosa

• Har element — to'rt qatlamli quti: mazmun, padding, border, margin.
• Fon mazmun va padding'ga tushadi, margin doim shaffof. Padding bosiladi, margin — yo'q.
• Border joy egallaydi, outline — yo'q.
• Egallagan joy = mazmun + ikki tomondagi padding, border va margin. Boshlang'ich holatda width faqat mazmunni o'lchaydi.
• Qisqa yozuv: tepadan soat mili bo'yicha; tushirib qoldirilgan tomon ro'parasidan oladi.
• Oraliq — CSS ishi: bo'sh teg, <br> va   o'rniga margin va padding.

Keyingi dars: box-sizing: border-box — width padding va border'ni ham o'z ichiga oladigan qilib, o'lchamni hisoblashni osonlashtiramiz.

Manbalar

• MDN: "Introduction to the CSS basic box model", "padding", "margin", "border" — developer.mozilla.org
• W3C: "CSS Box Model Module Level 3" — w3.org/TR/css-box-3
• web.dev: "Learn CSS — Box Model" — web.dev/learn/css/box-model