CSS margin sirlari: collapsing, manfiy va auto margin

Qisqacha: Normal oqimda ikki blokning tepa va pastki margin'lari qo'shilmaydi — ularning kattasi qoladi: 40 va 16 bo'lsa, oraliq 40. Bu hodisa margin collapsing deyiladi va u qo'shni bloklarda, ota bilan uning birinchi yoki oxirgi bolasida hamda bo'sh blokda bo'ladi. Orada padding, border yoki matn bo'lsa, ota flex, grid yoki flow-root bo'lsa — qo'shilish to'xtaydi. Manfiy margin elementni qo'shnisi tomon tortadi, margin-inline: auto esa eni berilgan blokni gorizontal markazlaydi. Yaxshi amaliyot: komponent o'ziga tashqi margin bermaydi, oraliqni uning otasi beradi.

Bu darsda

• Margin collapsing'ning uch holatini taniysiz va oraliqni oldindan hisoblaysiz.
• Qo'shilishni qanday to'xtatishni bilasiz.
• Manfiy margin bilan elementni qo'shnisiga tortasiz yoki ota padding'idan chiqarasiz.
• margin-inline: auto bilan blokni markazlaysiz va nega vertikal auto ishlamasligini tushuntirasiz.
• "Oraliqni layout beradi" tamoyilini va * + * naqshini qo'llaysiz.

Oldin bilishingiz kerak: Box model, box-sizing, Asosiy selektorlar (+ kombinatori), Matematik funksiyalar.

1. Nega bu kerak?

Box model darsida jumboq qoldirgan edik. Birinchi paragrafning pastki margin'i 40 piksel, ikkinchisining tepasidagisi 16. Oraliq esa 56 emas, 40 chiqdi.

Bu yagona sir emas. Stajyor «Bahor» kartasidagi sarlavhaga margin-top beradi — karta ichida joy paydo bo'lmaydi, butun karta pastga suriladi. margin: 0 auto blokni gorizontal o'rtaga qo'yadi, lekin margin: auto uni vertikal o'rtaga qo'ymaydi. Margin — CSS'ning eng ko'p savol tug'diradigan xususiyati. Bu darsda uning uchta sirini ochamiz: qo'shilish, manfiy qiymat va auto.

Birinchi sirga o'xshatish: choyxonadagi stollarni tasavvur qiling. Bir stolning talabi — "atrofimda kamida 1 metr yo'lak bo'lsin". Qo'shni stolniki — "kamida 60 santimetr". Otabek ular orasiga 1 metr 60 santimetr qoldirmaydi. 1 metr yetadi: ikkalasining talabi ham bajarildi. Vertikal margin xuddi shunday ishlaydi. U "shuncha joy qo'sh" degani emas, "qo'shnim kamida shuncha uzoqda bo'lsin" degani.

2. Margin collapsing: margin'lar qo'shilib ketadi

2.1 Qo'shni bloklar

Avval bitta atama. Normal oqim (normal flow) — siz hech qanday maxsus joylashuv bermaganingizdagi odatiy tartib. Bloklar kitob sahifasidagi xatboshilar kabi tepadan pastga, biri ostiga ikkinchisi teriladi. Hozirgacha yozgan hamma sahifangiz shu tartibda edi.

Margin collapsing — ikki vertikal margin bir-biriga tegib tursa, ular bitta margin'ga aylanishi. O'zbekcha "margin'larning qo'shilib ketishi" deymiz. Qoida oddiy: ikkala margin musbat bo'lsa, kattasi qoladi.

<style>
  :root {
    --rang-urgu: #b4461a;
  }
  h3 {
    margin: 0 0 40px;
    outline: 1px dashed var(--rang-urgu);
  }
  p {
    margin: 16px 0 0;
    outline: 1px dashed var(--rang-urgu);
  }
</style>
<h3 class="taom-nomi">Osh</h3>
<p>Narxi: 35 000 so'm</p>

Nimaga qarang: punktir ramkalar elementlarning chegarasini ko'rsatadi. Ular orasidagi bo'shliq — 40 piksel, 56 emas. Chrome'da o'lchadik: sarlavha 30-pikselda tugaydi, paragraf 70-pikselda boshlanadi. Paragrafning 16 piksellik margin'i sarlavhaning 40 piksellik margin'i ichiga "singib ketdi".

Ikki muhim cheklov:

• Faqat vertikal margin'lar qo'shiladi — tepa va past. Chap va o'ng margin'lar hech qachon qo'shilmaydi.
• Faqat normal oqimdagi bloklar orasida. Flex va grid — elementlarni qator yoki to'r qilib teradigan layout usullari (Flexbox darsidan boshlab o'rganamiz). Ularning ichida qo'shilish bo'lmaydi — buni pastroqda, "Qo'shilishni nima to'xtatadi" bo'limida ko'ramiz.

Nega CSS shunday qilingan? Matn uchun. Brauzer har paragrafga tepa va pastdan 1em beradi. Agar ular qo'shilsa, paragraflar orasida 2em, sahifa boshida esa 1em bo'lardi — notekis. Qo'shilish tufayli hamma joyda bir xil 1em. Bu qoida hujjatlar uchun o'ylangan va u yerda juda qulay.

2.2 Ota va uning birinchi bolasi

Endi stajyorning muammosi. Karta ichidagi sarlavhaga margin-top: 32px beramiz. Kartaning foni qaymoq rangda, sahifaniki — to'q sariq:

<style>
  :root {
    --rang-fon: #fffaf0;
  }
  body {
    background-color: #fde2c4;
  }
  .taom-karta {
    background-color: var(--rang-fon);
  }
  .taom-karta h3 {
    margin-top: 32px;
  }
</style>
<h2>Bugungi menyu</h2>
<article class="taom-karta">
  <h3 class="taom-nomi">Osh</h3>
  <p>35 000 so'm</p>
</article>

Nimaga qarang: qaymoq fon "Osh" so'zining tepasidan boshlanadi — karta ichida 32 piksellik bo'sh joy yo'q. Bo'sh joy kartaning tashqarisida, to'q sariq maydonda paydo bo'ldi.

Sababi: kartaning o'z padding'i ham, border'i ham yo'q. Sarlavhaning tepa margin'i kartaning tepa margin'iga to'g'ridan-to'g'ri tegib turibdi. Ular qo'shilib ketdi va natija kartaning tashqarisiga chiqdi. Endi u yerda h2 ning pastki margin'i 19.92-bob bilan ham qo'shildi: kattasi — 32. Chrome'da o'lchadik: h2 bilan karta orasida roppa-rosa 32 piksel, karta va sarlavhaning tepasi esa bir xil nuqtada.

Pastda ham xuddi shunday: oxirgi paragrafning pastki margin'i kartadan tashqariga chiqadi.

Buni ko'p uchratasiz. Sahifaning eng tepasi ham shunday ishlaydi: body ning 8 piksellik margin'i va birinchi h1 ning 21.44 piksellik margin'i qo'shilib, tepada 21.44 piksel qoladi, 29.44 emas.

2.3 Bo'sh blok

Uchinchi holat — ichida hech narsa yo'q blok. Uning tepa va pastki margin'lari bir-biriga tegib turadi va bitta bo'lib qoladi. Keyin u qo'shnilari bilan ham qo'shiladi.

Sarlavhalar va paragraflar darsidagi bo'sh p larni eslang:

<p>Osh tayyor.</p>
<p></p>
<p></p>
<p>Kabob ham tayyor.</p>

Maqsad — katta oraliq edi. Chrome'da o'lchadik: oraliq 16 piksel — xuddi bo'sh p lar umuman yo'qdek. Ikkala bo'sh paragrafning to'rtta margin'i va qo'shni paragraflarning margin'lari — oltita 16 piksellik margin — hammasi bitta 16 ga qo'shilib ketdi. Bo'sh teglar faqat ma'nosiz emas, ular hatto ishlamaydi ham. Box model darsidagi to'g'ri yo'l — bitta aniq margin.

Bo'sh blokka padding, border, height yoki ichiga matn bersangiz, qo'shilish to'xtaydi.

Tekshirib ko'ring: h2 ning pastki margin'i 24 piksel, undan keyingi p ning tepa margin'i 16 piksel. Oraliq necha piksel? Agar p ga margin-top: 30px bersak-chi?

2.4 Qo'shilishni nima to'xtatadi

Margin'lar faqat bir-biriga to'g'ridan-to'g'ri tegib turganda qo'shiladi. Orada biror narsa bo'lsa — to'xtaydi:

• Padding yoki border. Kartaga padding-top: 1px yoki border-top bering — sarlavhaning margin'i karta ichida qoladi. Chrome'da tekshirdik: border-top: 2px bilan sarlavha karta chegarasidan roppa-rosa 32 piksel pastda turdi.
• Matn. Ota bilan bola orasida matn bo'lsa, margin'lar tegmaydi.
• display: flow-root. Otaga shu qiymatni bersangiz, u ichidagi margin'larni o'zida ushlaydi — hech narsani qo'shmasdan. Bu qiymat otani alohida "xona"ga aylantiradi. Keyingi darsda uni ko'rasiz, chuqur nazariyasi — Normal oqim va formatting context darsida.
• Flex va grid. Ota flex yoki grid bo'lsa, ichidagi elementlarning margin'lari na bir-biri bilan, na ota bilan qo'shiladi (Flexbox'ga kirish).

flowchart TD
  A["Ikki vertikal margin<br/>bir-biriga tegadimi?"] -->|"Yo'q: orada padding,<br/>border yoki matn"| N["Qo'shilmaydi:<br/>ikkalasi ham ishlaydi"]
  A -->|Ha| B["Elementlar flex yoki<br/>grid ichidami?"]
  B -->|Ha| N
  B -->|Yo'q| C["Qiymatlar qanday?"]
  C -->|Ikkalasi musbat| M["Kattasi qoladi"]
  C -->|Biri manfiy| S["Yig'indisi:<br/>40 + (−10) = 30"]
  C -->|Ikkalasi manfiy| K["Eng manfiysi"]

Nimaga qarang: birinchi savol — "tegadimi?". Ko'p hollarda javobni DevTools chizmasi beradi: ikki qutining margin'lari orasida padding yoki border bormi. Manfiy qiymatlar bilan nima bo'lishini keyingi, "Manfiy margin" bo'limida ko'ramiz.

2.5 Eng oddiy himoya: bitta yo'nalish

Qo'shilish bilan kurashishning eng yaxshi yo'li — unga imkon bermaslik. Ko'p jamoalarda qoida bor: vertikal oraliq faqat bir tomonga beriladi. Masalan, faqat margin-top. Qo'shni ikki elementdan faqat bittasi margin bersa, qo'shiladigan narsaning o'zi qolmaydi. Dars oxiridagi * + * naqshi aynan shu g'oyaga qurilgan.

Tekshirib ko'ring: «Bahor» kartasining ichidagi h3 ga margin-top: 1em berildi, lekin karta ichida joy paydo bo'lmadi — karta pastga surildi. Ikki xil tuzatishni ayting.

3. Manfiy margin

3.1 Elementni tortish

Padding manfiy bo'lolmaydi, margin esa bo'la oladi. Manfiy margin elementni o'sha tomonga tortadi:

• margin-top: -10px — element 10 piksel yuqoriga, oldingi qo'shnisi tomon siljiydi;
• margin-bottom: -10px — keyingi qo'shni 10 piksel yuqoriga tortiladi;
• margin-left: -10px — element chapga siljiydi.

Qo'shilish qoidasi manfiy qiymatda ham ishlaydi. Musbat va manfiy uchrashsa — ular qo'shiladi: 40 va −10 dan 30 chiqadi. Chrome'da tekshirdik: sarlavhaning pastki margin'i 40, paragrafniki −10 — oraliq 30. Ikkalasi manfiy bo'lsa — eng manfiysi qoladi.

3.2 Ota padding'idan chiqish

Manfiy margin'ning eng foydali ishi — elementni otasining padding'idan tashqariga chiqarish. «Bahor» kartasi tepasiga aksiya lentasini qo'yamiz. Kartada chap va o'ngda 1em padding bor, lenta esa chetdan-chetgacha cho'zilsin:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-urgu: #b4461a;
    --rang-fon: #fffaf0;
  }
  .taom-karta {
    width: 16rem;
    padding: 0 1em 1em;
    border: 2px solid var(--rang-asosiy);
  }
  .aksiya {
    margin: 0 -1em 1em;
    padding: 0.25em 1em;
    background-color: var(--rang-urgu);
    color: var(--rang-fon);
  }
</style>
<article class="taom-karta">
  <p class="aksiya">Aksiya: −10%</p>
  <h3 class="taom-nomi">Osh</h3>
  <p>35 000 so'm</p>
</article>

Nimaga qarang: qizg'ish lenta yashil chegaraga chapdan ham, o'ngdan ham tegib turibdi. Karta ichidagi boshqa matn esa chegaradan 1em uzoqda. Lentaning margin: 0 -1em 1em qiymati chap va o'ngdan kartaning padding'ini "yeb qo'ydi". Chrome'da o'lchadik: kartaning padding bilan birgalikdagi ichki eni 288 piksel (256 + 16 + 16), lenta ham 288.

Nega bu ishladi? Lentaning width i berilmagan. Bunday blok otasining enini to'ldiradi va manfiy margin'lar uni har tomonga 16 pikselga kengaytiradi. Lenta ichidagi matn esa o'z padding'i bilan joyida qoldi.

3.3 Ehtiyot bo'ling

Manfiy margin kuchli, lekin xavfli vosita:

• Elementlar bir-birining ustiga chiqib, matnni yopib qo'yishi mumkin.
• Ekran chetidan chiqib ketgan element telefonda gorizontal skroll beradi.
• Kod o'qiyotgan hamkasb -1em ning sababini darhol tushunmaydi — izoh yozing.

Qoida: manfiy margin — aniq, izohlangan ish uchun (lenta, chetdan-chetga rasm). "Nimadir to'g'ri turmayapti" degan muammoni u bilan yamamang. Avval DevTools'da sababini toping.

4. auto margin

4.1 Gorizontal markazlash

Matematik funksiyalar darsida portfolio ustunini margin: 0 auto bilan o'rtaga qo'ygan edingiz. Endi nega ishlaganini tushunamiz.

auto — "brauzer, bu yerga qolgan joyni o'zing ber" degani. Blokning eni otasidan tor bo'lsa, bo'sh joy qoladi. Chap va o'ng margin'lar ikkalasi ham auto bo'lsa, brauzer bo'sh joyni ular orasida teng bo'ladi — blok o'rtaga tushadi. Chrome'da tekshirdik: 784 piksellik ota ichidagi 200 piksellik blokka har tomondan 292 piksel margin berildi.

Faqat bitta tomon auto bo'lsa, qolgan hamma joy shu tomonga ketadi. margin-left: auto blokni o'ng chetga suradi.

Bugun buning uchun alohida qisqa yozuv bor: margin-inline — chap va o'ng margin'ni birga beradi. O'zbekcha kabi chapdan o'ngga yoziladigan matnda margin-inline: auto — margin-left: auto; margin-right: auto bilan bir xil. Matn yo'nalishiga qarab ishlaydigan bunday "mantiqiy" xususiyatlarni Mantiqiy xususiyatlar darsida to'liq o'rganamiz.

<style>
  :root {
    --rang-asosiy: #2f6b3a;
  }
  .taom-karta {
    width: 14rem;
    margin-inline: auto;
    border: 2px solid var(--rang-asosiy);
    padding: 0 1em;
  }
  .taom-karta + .taom-karta {
    margin-top: 1rem;
    margin-inline: auto 0;
  }
</style>
<article class="taom-karta"><p>O'rtada: ikki tomon auto</p></article>
<article class="taom-karta"><p>O'ngda: faqat chap auto</p></article>

Nimaga qarang: birinchi karta o'rtada, ikkinchisi o'ng chetda. margin-inline: auto 0 — ikki qiymat: birinchisi chap (boshlanish), ikkinchisi o'ng (tugash). Qaysi eni 14rem ekaniga qarang — auto faqat eni berilgan blokda ishlaydi.

4.2 Nega margin-inline, margin: 0 auto emas?

Ikkalasi ham markazlaydi. Farqi — tepa va past. margin: 0 auto to'rt tomonni beradi: tepa va pastni 0 ga tushiradi. Ertaga boshqa qoidada footer { margin-top: 3rem; } yozsangiz, kaskadda qaysi biri keyin turganiga qarab u yo ishlaydi, yo yo'qoladi. Qisqa yozuv margin-inline: auto esa faqat chap va o'ngga tegadi — vertikal margin'lar boshqa qoidalarga ochiq qoladi.

4.3 Nega vertikal auto ishlamaydi

margin-top: auto; margin-bottom: auto bilan blokni vertikal o'rtaga qo'yib bo'lmaydi. Chrome'da tekshirdik: 200 piksel baland ota ichida blok baribir tepada turdi, auto 0 ga aylandi.

Sabab O'lcham birliklari darsidagi height: 50% muammosiga o'xshaydi. Normal oqimda otaning bo'yi odatda bolalardan hisoblanadi — "ortib qolgan bo'y" degan tushuncha yo'q. Taqsimlanadigan bo'sh joy bo'lmagani uchun vertikal auto shunchaki 0. Flex va grid'da esa auto margin ikkala yo'nalishda ham ishlaydi — Flex'da auto margin va Markazlashning barcha usullari darslarida.

auto ning yana bir sharti: element blok bo'lishi kerak. span kabi satr ichidagi elementga margin-inline: auto hech narsa qilmaydi. Nega — keyingi darsda.

Tekshirib ko'ring: .taom-karta { margin-inline: auto; } yozildi, lekin karta o'rtaga tushmadi — u butun enni egallab turibdi. Nima yetishmayapti?

5. Oraliqni kim beradi: komponent emas, layout

5.1 Muammo

Box model darsining mashqida kartaga margin-bottom: 1.5rem berdik. Kartalar ro'yxatida bu yaxshi ishladi. Endi shu kartani sahifaning boshqa joyiga — masalan, yon ustunga yoki footer dan oldingi yakka joyga qo'ying. U 1.5rem margin'ni o'zi bilan olib boradi. Oxirgi kartaning ostida keraksiz bo'sh joy qoladi, yonidagi elementlar bilan tekislik buziladi.

Karta qayerda turishini bilmaydi. Buni uning otasi biladi. Shuning uchun zamonaviy CSS'da tamoyil shunday: komponent o'ziga tashqi margin bermaydi. U faqat o'zining ichini — padding, chegara, rang — bezaydi. Elementlar orasidagi joyni ular turgan konteyner, ya'ni layout beradi.

Choyxona o'xshatishiga qaytsak: stol o'zi bilan "atrofimda 1 metr" degan qoidani olib yurmaydi. Stollarni zalga qanday terishni Jasur aka — zal egasi — hal qiladi.

5.2 * + * naqshi

Bitta qoida bilan konteyner ichidagi hamma qo'shni elementlar orasiga joy qo'yamiz:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
  }
  section > * {
    margin: 0;
  }
  section > * + * {
    margin-top: 1rem;
  }
  .taom-karta {
    border: 2px solid var(--rang-asosiy);
    padding: 0.5em 1em;
  }
</style>
<section>
  <h2>Bugungi menyu</h2>
  <article class="taom-karta">Osh — 35 000 so'm</article>
  <article class="taom-karta">Lag'mon — 28 000 so'm</article>
  <article class="taom-karta">Manti — 30 000 so'm</article>
</section>

Nimaga qarang: sarlavha va uchala karta orasida bir xil 16 piksel. Birinchi elementning tepasida esa hech qanday qo'shimcha joy yo'q. Kartaning o'zida birorta ham margin yo'q.

O'qilishi, o'ngdan chapga (Asosiy selektorlar darsidagi qoida):

• section > * — section ning har bir bolasi. Undan brauzer bergan margin'larni olib tashlaymiz — hisob toza bo'lsin.
• section > * + * — section ning boshqa bola darhol keyin turgan bolasi. Ya'ni birinchisidan boshqa hammasi. Ularga faqat tepadan joy beramiz.

Faqat bitta yo'nalish — margin-top — bo'lgani uchun qo'shiladigan narsa yo'q. Kartalarni tartibini o'zgartirsangiz, yangisini qo'shsangiz yoki olib tashlasangiz — oraliq o'zi to'g'ri qoladi.

* + * belgilari ikki ko'z kabi tikilib turadi. Shuning uchun naqshni mashhur qilgan dasturchi Heydon Pickering uni "lobotomized owl" deb atagan — "qotib qolgan boyqush". Nomini eslab qolish oson, ishini ham.

5.3 Keyinroq — gap

Flex va grid'da bundan ham oddiy yo'l bor: gap xususiyati. U faqat elementlar orasiga joy qo'yadi — chetlarga emas, qo'shilish ham yo'q. Uni Flex'da gap darsida o'rganamiz. O'shanda "oraliqni layout beradi" tamoyili bitta qatorga aylanadi. Hozircha — * + *.

Margin butunlay yo'qolmaydi. U matn oqimida — maqola ichidagi paragraflar va sarlavhalar orasida — hali ham asosiy vosita. Istisno joylarda ham kerak: masalan, bitta elementni boshqalardan ko'proq ajratish uchun.

6. Ko'p uchraydigan xatolar

6.1 "Margin qo'shilmayapti"

h2 ga margin-bottom: 20px, p ga margin-top: 20px — kutilgani 40, chiqqani 20. Bu xato emas, qo'shilish. Tuzatish: oraliqni bitta elementga, bitta yo'nalishda bering.

6.2 Birinchi bolaning margin'i otadan chiqib ketdi

Kartaning ichki sarlavhasi kartani pastga suradi, karta foni esa sarlavhaning tepasidan boshlanadi. Tuzatish: kartaga padding yoki border; keyingi darsdan — display: flow-root.

6.3 margin: 0 auto vertikal margin'ni o'chirdi

Ustun o'rtaga tushdi, lekin footer ning margin-top i ishlamay qoldi. Sabab — 0. Tuzatish: margin-inline: auto.

6.4 margin: auto bilan vertikal markazlash

Normal oqimda vertikal auto — 0. Tuzatish: flex yoki grid (Markazlashning barcha usullari).

6.5 Eni berilmagan blokni auto bilan markazlash

Blok butun enni egallaydi — markazlanadigan joy yo'q. Tuzatish: width yoki max-width.

6.6 Manfiy margin bilan "yamash"

Bitta joy to'g'rilandi, boshqa ekran enida hammasi bir-birining ustiga chiqdi. Tuzatish: avval DevTools'da sababni toping — ko'pincha u qo'shilish yoki kutilmagan brauzer margin'i.

7. Mashqlar

Mashqlarni kurs/mashqlar/05/ papkasida bajaring.

1-mashq (oson): Oraliqni oldindan ayting

Har holatda ikki element orasidagi vertikal oraliq necha piksel?

1. Yuqoridagi margin-bottom: 24px, pastdagi margin-top: 16px —
2. Yuqoridagi margin-bottom: 30px, pastdagi margin-top: -10px —
3. Yuqoridagi margin-bottom: 24px, pastdagi margin-top: 16px, ota — grid —
4. <p></p> ning o'zi (brauzer margin'i 16), undan oldingi va keyingi paragraflar bilan —

Ishora: "Qo'shilishni nima to'xtatadi" bo'limidagi diagramma bo'yicha yuring. Grid'da qo'shilish yo'q.

2-mashq (o'rta): Karta sarlavhasi va markaz

«Bahor» menyu sahifasida:

<main>
  <h1>Menyu</h1>
  <article class="taom-karta">
    <h3 class="taom-nomi">Osh</h3>
    <p>Narxi: <span class="narx">35 000 so'm</span></p>
  </article>
</main>

Hozirgi CSS:

main {
  width: 20rem;
  margin: 0 auto;
}
.taom-karta {
  background-color: #fffaf0;
}
.taom-nomi {
  margin-top: 1.5rem;
}

Muammolar: karta foni sarlavhaning tepasidan boshlanadi. main ga margin-top: 2rem qo'shmoqchi bo'lishdi — alohida qoida yozishdi, u ishlamadi. Ikkala muammoni tushuntiring va tuzating. Karta ichida chap va o'ngdan 1em bo'sh joy ham bo'lsin.

Ishora: birinchisi — "Ota va uning birinchi bolasi", ikkinchisi — "Nega margin-inline" bo'limi. Alohida qoida faylda qayerda turganini ham tekshiring.

<style>
  :root {
    --rang-fon: #fffaf0;
    --rang-urgu: #b4461a;
  }
  body {
    background-color: #fde2c4;
  }
  main {
    width: 20rem;
    margin-inline: auto;
    margin-top: 2rem;
  }
  .taom-karta {
    background-color: var(--rang-fon);
    padding: 1px 1em;
  }
  .taom-nomi {
    margin-top: 1.5rem;
  }
  .narx {
    color: var(--rang-urgu);
  }
</style>
<main>
  <h1>Menyu</h1>
  <article class="taom-karta">
    <h3 class="taom-nomi">Osh</h3>
    <p>Narxi: <span class="narx">35 000 so'm</span></p>
  </article>
</main>

3-mashq (qiyin): Komponentdan margin'ni oling

Stajyor shunday CSS yozdi:

.taom-karta {
  border: 2px solid #2f6b3a;
  padding: 0.5em 1em;
  margin-top: 1rem;
  margin-bottom: 1.5rem;
}

Kartalar menyu sahifasidagi section ichida ro'yxat bo'lib turadi. Bosh sahifada esa bitta karta "Kun taomi" sifatida aside ichida turadi va aside ning ostida ortiqcha bo'sh joy qoladi.

1. Nega menyuda kartalar orasidagi oraliq 2.5rem emas?
2. Kartadan tashqi margin'larni olib tashlang va oraliqni layout darajasida bering: menyuda kartalar orasida 1.5rem, bosh sahifadagi aside da esa karta atrofida hech qanday tashqi joy bo'lmasin.
3. Menyuga yana ikki karta qo'shilsa, CSS'ni o'zgartirish kerakmi?

Ishora: * + * naqshi section bolalariga. aside uchun hech narsa yozmaslik ham yechim.

/* Komponent: faqat o'zining ichi */
.taom-karta {
  border: 2px solid #2f6b3a;
  padding: 0.5em 1em;
}

/* Layout: menyu ro'yxatidagi oraliq */
section > * + * {
  margin-top: 1.5rem;
}

4-mashq: Portfolio qadami — ustun, footer va kartalar oralig'i

1. Matematik funksiyalar darsidagi header, main, footer qoidasida margin: 0 auto ni margin-inline: auto ga almashtiring.
2. footer asosiy mazmundan 3rem uzoqda tursin.
3. Box model darsida loyiha kartalari va savol-javob bloklariga margin-bottom bergan edingiz. Uni komponentdan olib, layout darajasiga ko'chiring: faqat ikkinchi va keyingi kartalar tepadan joy olsin.
4. Loyihalar sahifasida DevTools bilan main ni tanlang. Box model chizmasida uning margin'i 0. Lekin sahifada header va main orasida katta bo'shliq bor. Bu bo'shliq qayerdan keldi?

Ishora: 3-band — + kombinatori: "kartadan darhol keyin turgan karta". 4-band — main ning birinchi bolasi kim va uning margin'i qancha?

/* Sahifaning markaziy ustuni */
header,
main,
footer {
  width: min(100% - 2rem, 70ch);
  margin-inline: auto;
}

footer {
  color: var(--rang-ikkinchi);
  border-top: 1px solid currentColor;
  margin-top: 3rem;
}

/* Kartalar: oraliq faqat qo'shnilar orasida */
h1 ~ article + article {
  margin-top: 1.5rem;
}

details[name="savollar"] + details[name="savollar"] {
  margin-top: 0.5rem;
}

8. Real ishda

• Collapsing — eng ko'p "bug" deb o'ylanadigan to'g'ri xatti-harakat. Stack Overflow'da "margin-top pushes parent down" kabi savollar minglab. Endi siz sababini ham, uch xil tuzatishini ham bilasiz.
• Dizayn tizimlari komponentlarga tashqi margin bermaydi: tugma, karta, forma maydoni — hammasi margin'siz. Oraliqni "stack" (ustma-ust terish) yoki "cluster" (yonma-yon terish) kabi layout komponentlari beradi. Ularning ichida aynan * + * yoki gap turadi. Bu naqshlarni kursda keyinroq ko'ramiz — hozir nomini bilish yetarli.
• Markazlash — intervyuning sevimli savoli: "Blokni gorizontal va vertikal markazlashning qanday yo'llari bor?". Gorizontal qismini hozir bilasiz, vertikalini — flex va grid darslaridan keyin.
• Intervyuda yana: "Margin collapsing nima va uni qanday to'xtatasiz?", "Nega margin: auto vertikal ishlamaydi?".

Xulosa

• Vertikal margin'lar bir-biriga tegsa, qo'shiladi: musbatlardan kattasi, musbat va manfiydan yig'indi qoladi.
• Uch holat: qo'shni bloklar, ota va birinchi/oxirgi bola, bo'sh blok.
• Padding, border, matn, flow-root, flex va grid qo'shilishni to'xtatadi. Gorizontal margin'lar hech qachon qo'shilmaydi.
• Manfiy margin elementni tortadi — ota padding'idan chiqish uchun qulay, lekin izoh bilan.
• margin-inline: auto eni berilgan blokni markazlaydi va vertikal margin'larga tegmaydi. Normal oqimda vertikal auto — 0.
• Komponent tashqi margin bermaydi — oraliqni layout beradi: * + *, keyinroq gap.

Keyingi dars: display va yashirish — element blok, satr ichidagi yoki umuman ko'rinmas bo'lishini display qanday boshqaradi.

Manbalar

• MDN: "Mastering margin collapsing", "margin", "margin-inline" — developer.mozilla.org
• W3C: "CSS 2.2", 8.3.1 Collapsing margins — w3.org/TR/CSS22/box.html
• A List Apart: Heydon Pickering, "Axiomatic CSS and Lobotomized Owls" — alistapart.com