Spacing tizimi: 4/8 pt to'r va masofa shkalasi

Qisqacha: Spacing tizimi — interfeysdagi hamma bo'sh joylar (padding, margin, gap) tasodifiy sonlardan emas, oldindan kelishilgan shkaladan olinadi: 4, 8, 12, 16, 24, 32, 48, 64. Asos — 8 (kichik joylar uchun 4): bu sonlar har xil ekran zichligida butun pikselga aylanadi va bir-biriga yaxshi bo'linadi. Asosiy qoida — ichki masofa tashqisidan kichik: bitta guruh ichidagi narsalar bir-biriga guruhlar orasidagidan yaqinroq turadi. CSS'da shkala --masofa-* tokenlari bo'lib yashaydi.

Bu darsda

• 4/8 pt to'r nima ekanini va nega aynan 8 tanlanganini tushuntirasiz.
• Masofa shkalasini quring va uni tokenlar orqali ishlatasiz.
• "Ichki ≤ tashqi" qoidasini karta va formada qo'llaysiz.
• Vertikal ritmni, komponent ichki padding'ini va layout gap ini bir tizimga bog'laysiz.
• Bitta komponentning zich va keng (compact/comfortable) variantlarini tokenlar bilan yasaysiz.

Oldin bilishingiz kerak: Vizual ierarxiya, Dizayn tokenlari, Margin sirlari, Fluid tipografiya va Utopia.

1. Nega bu kerak?

Oldingi darsda bo'sh joy ierarxiya vositasi ekanini ko'rdik: u guruhlaydi va urg'u beradi. Endi savol: qancha bo'sh joy?

Stajyor «Bahor» menyusiga ikkita karta qo'shdi. Har qiymatni "ko'zda chamalab" yozdi: kartaning ichki bo'sh joyi 13 piksel, nom bilan narx orasi 17, narx bilan tavsif orasi 10, kartalar orasi 15. Alohida qaraganda hammasi "normal". Birga esa:

<style>
  body { font-family: system-ui, sans-serif; background: #fffaf0; }
  .taom-karta {
    max-width: 18rem;
    padding: 13px 15px;
    margin-bottom: 15px;
    background: white;
    border-radius: 6px;
  }
  .taom-karta h3 { margin: 0 0 17px; font-size: 1.25rem; }
  .narx {
    display: block;
    margin-bottom: 10px;
    color: #b4461a;
    font-weight: 700;
  }
  .taom-karta p { margin: 0; color: #5b6660; }
</style>
<article class="taom-karta">
  <h3>Osh</h3>
  <span class="narx">35 000 so'm</span>
  <p>Guruch, sabzi, qo'y go'shti.</p>
</article>
<article class="taom-karta">
  <h3>Lag'mon</h3>
  <span class="narx">28 000 so'm</span>
  <p>Qo'lda cho'zilgan xamir, mol go'shti.</p>
</article>

Nimaga qarang: nom narxdan juda uzoq, narx esa tavsifga yopishgan. Kartalar orasidagi 15 piksel kartaning o'z ichki bo'sh joyidan deyarli farq qilmaydi — ikki karta bir-biriga "yopishib" ketgandek. Xato bitta joyda emas, tizim yo'qligida.

Bir kishi yozganda bunday sonlar 10 ta bo'ladi. Uch dasturchi bir yil ishlasa — 60 ta: 13, 14, 15, 17, 18, 20, 22... Har yangi komponentda yana bir "qo'l bilan tanlangan" son. Sayt sezilarsiz, lekin doim "biroz noto'g'ri" ko'rinadi.

Yechim qurilishdan olingan. G'isht teruvchi devorni santimetrlab emas, g'isht bilan o'lchaydi: "uch yarim g'isht". Hamma o'lchov bitta birlikning karralisi — shuning uchun g'ishtlar bir-biriga mos tushadi. Interfeysda ham shunday "g'isht" bor.

2. 4/8 pt to'r

2.1 Asosiy g'oya

8 pt to'r (8-point grid) — interfeysdagi hamma masofa va o'lcham 8 ning karralisi bo'lsin degan kelishuv: 8, 16, 24, 32, 48... Kichik joylar uchun yarim qadam — 4: ikonka va matn orasi, kichik belgi ichidagi bo'sh joy. Shuning uchun uni ko'pincha 4/8 pt to'r deyishadi.

"pt" (point) so'zi dizaynerlardan keladi: iOS'da o'lcham birligi — point, Android'da — dp (density-independent pixel). Ikkalasi ham "ekran zichligidan qat'i nazar bir xil ko'rinadigan birlik" — CSS'dagi px bilan bir ma'noda (O'lcham birliklari). Figma'da esa u to'g'ridan-to'g'ri piksel deb yoziladi. Shuning uchun CSS'da "8 pt" = 8px = 0.5rem.

Bu g'oya katta dizayn tizimlarida rasmiy qoida. Material Design yo'riqnomasida komponentlar 8dp lik kvadrat to'rga tekislanadi, ikonkalar va matn esa 4dp lik to'rga.

2.2 Nega aynan 8?

Uchta sabab bor.

1. Ekran zichliklari. Telefon ekranlari har xil zichlikda: 1x, 1.5x, 2x, 3x (Rasmlar CSS tomoni darsidagi devicePixelRatio). CSS'dagi 1 piksel 1.5x ekranda 1.5 ta haqiqiy nuqta. Endi hisoblang:

8 ning karralilari har zichlikda butun songa aylanadi. 5 va 13 esa 1.5x ekranda yarim nuqta beradi — brauzer chetni ikki nuqta orasiga "surkaydi" va chiziq biroz xira chiqadi.

2. Bo'linish. 8 ikkiga, to'rtga va sakkizga bo'linadi. 16 ni ikkiga bo'lsangiz — 8, 24 ni uchga — 8. Markazlash va ustunlarni teng bo'lish oson.

3. Kam tanlov. Bu eng muhimi. 8 lik qadam katta: 16 va 24 orasida "20 mi, 22 mi?" degan savol yo'q. Dizayner va dasturchi kamroq bahslashadi, ko'proq ishlaydi.

Maslahat: 4/8 to'r qonun emas, kelishuv. Ba'zi jamoalar 6 yoki 5 ni asos qiladi. Muhimi — bitta asos va hamma unga amal qilishi.

Tekshirib ko'ring: Dizayner tugmaning ichki bo'sh joyini 10 piksel chizdi. 4/8 to'rga eng yaqin qaysi qiymatlar va qaysi birini tanlaysiz?

3. Masofa shkalasi

3.1 Chiziqli emas, zinapoya

8 ning hamma karralilarini ishlatish shart emas. 64, 72, 80, 88 — bir-biridan zo'rg'a farq qiladi. Kichik masofalar orasidagi farq aniq seziladi (8 va 16 — ikki barobar), kattalari orasida esa yo'q (80 va 88 — 10%).

Refactoring UI kitobidagi maslahat: shkalaning qo'shni qadamlari bir-biridan kamida 25% ga farq qilsin. Natijada zinapoya hosil bo'ladi — kichik joyda qadamlar mayda, katta joyda katta:

4   8   12   16   24   32   48   64   96

Qo'shni qadamlar nisbati: 8 → 12 — 1.5 barobar, 16 → 24 — 1.5, 32 → 48 — 1.5, 48 → 64 — 1.33. Hech qayerda 25% dan kam emas.

3.2 «Bahor» shkalasi

Dizayn tokenlari darsida «Bahor» masofa tokenlarini yozgan edik. Endi ularning mantig'ini ko'ramiz:

Telefonda shkala aynan 4/8 to'rda. Kompyuterda esa 4.5, 13.5, 27 — to'rdan chiqib ketdi. Nega? «Bahor» masofalari fluid: ular asosiy shrift bilan birga 16 dan 18 pikselgacha o'sadi (Fluid tipografiya). Bu ongli tanlov: qat'iy to'r o'rniga nisbat saqlanadi — --masofa-l doim --masofa-m dan 1.5 barobar katta. Ko'p jamoalar aynan shunday qiladi: to'r — telefon dizayni uchun kelishuv, fluid shkala — uning kattaroq ekrandagi davomi.

Qat'iy 4/8 to'r kerak bo'lsa (masalan, portfolio'da), tokenlar oddiy rem bo'ladi: --masofa-m: 1rem. Portfolio Dizayn tokenlari darsidan beri shunday.

3.3 Tailwind ham shu g'oyada

Tailwind CSS'da (Tailwind CSS 1) masofa klasslari bitta asosdan hisoblanadi. v4 ning standart temasida --spacing: 0.25rem — ya'ni 4 piksel. p-4 — calc(var(--spacing) * 4), ya'ni 16 piksel; gap-6 — 24 piksel. Tailwind istalgan karralini (p-5 = 20) ruxsat beradi — shkalani cheklash jamoaning o'z intizomi.

Tekshirib ko'ring: Nega shkalaga 20 ni qo'shmadik? 16 va 24 orasida u foydali emasmi?

4. Ichki masofa tashqisidan kichik

4.1 Qoida

Vizual ierarxiya darsidagi Gestalt yaqinlik qonunini eslang: yaqin turganlar — bitta guruh. Undan amaliy qoida chiqadi:

Guruh ichidagi masofa guruhlar orasidagi masofadan kichik bo'lsin. Qisqasi: ichki ≤ tashqi.

Menyu kartasida uch daraja bor:

flowchart TD
  A["Kartalar orasi<br/>--masofa-l · 24"] --> B["Karta ichki chegarasi<br/>--masofa-m · 16"]
  B --> C["Nom va narx<br/>--masofa-xs · 8"]
  B --> D["Narx va tavsif<br/>--masofa-xs · 8"]

Nimaga qarang: tashqaridan ichkariga masofa kichrayib boradi — 24, 16, 8. Har daraja o'z ichidagisidan katta. Ko'z shunday o'qiydi: "bu — bitta karta, uning ichida — bitta taom haqida ma'lumot".

4.2 Karta: oldin va keyin

Darsning boshidagi kartalarni shkala va qoida bilan qayta yozamiz. «Bahor» tokenlari — telefondagi qiymatlari bilan:

<style>
  :root {
    --masofa-xs: 0.5rem;
    --masofa-m: 1rem;
    --masofa-l: 1.5rem;
  }
  body { font-family: system-ui, sans-serif; background: #fffaf0; }
  .taom-karta {
    max-width: 18rem;
    padding: var(--masofa-m);
    background: white;
    border-radius: 0.5rem;
  }
  .taom-karta + .taom-karta { margin-block-start: var(--masofa-l); }
  .taom-karta > * { margin: 0; }
  .taom-karta > * + * { margin-block-start: var(--masofa-xs); }
  .taom-karta h3 { font-size: 1.25rem; }
  .narx { display: block; color: #b4461a; font-weight: 700; }
  .taom-karta p { color: #5b6660; }
</style>
<article class="taom-karta">
  <h3>Osh</h3>
  <span class="narx">35 000 so'm</span>
  <p>Guruch, sabzi, qo'y go'shti.</p>
</article>
<article class="taom-karta">
  <h3>Lag'mon</h3>
  <span class="narx">28 000 so'm</span>
  <p>Qo'lda cho'zilgan xamir, mol go'shti.</p>
</article>

Nimaga qarang: kartaning ichida hamma qatorlar bir xil 8 piksel bilan terilgan, ichki chegara 16, kartalar orasi 24. Endi kartalar aniq ikkita alohida guruh. Kodda bitta ham "chamalangan" son yo'q — faqat uchta token.

.taom-karta > * + * — "kartaning har bolasi, agar undan oldin boshqa bola bo'lsa" (Asosiy selektorlar darsidagi qo'shni kombinatori). Birinchi boladan tashqari hammasiga tepa masofa beriladi. Bu naqshni Heydon Pickering 2014-yilda "lobotomized owl" (* + * — boyqushning ikki ko'zi va tumshug'iga o'xshaydi) deb atagan. Uning afzalligi: masofa elementlar orasida yashaydi, birinchisining tepasida va oxirgisining pastida ortiqcha joy yo'q.

4.3 Formada

Bron formasida xuddi shu qoida: yorliq o'z maydoniga yaqin, maydonlar guruhlari bir-biridan uzoqroq.

<style>
  :root {
    --masofa-2xs: 0.25rem;
    --masofa-m: 1rem;
    --masofa-l: 1.5rem;
  }
  body { font-family: system-ui, sans-serif; }
  .juft {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    gap: 2rem;
  }
  form { width: 14rem; }
  label, input { display: block; font: inherit; }
  input { width: 100%; box-sizing: border-box; padding: 0.5rem; }
  .yomon p { margin: 0; }
  .yomon label { margin-block: 1rem 0.75rem; }
  .yaxshi p { margin: 0; }
  .yaxshi p + p { margin-block-start: var(--masofa-l); }
  .yaxshi label { margin-block-end: var(--masofa-2xs); }
</style>
<div class="juft">
  <form class="yomon" aria-label="Yomon">
    <p><label for="i1">❌ Ism</label><input id="i1"></p>
    <p><label for="t1">Telefon</label><input id="t1"></p>
    <p><label for="s1">Sana</label><input id="s1"></p>
  </form>
  <form class="yaxshi" aria-label="Yaxshi">
    <p><label for="i2">✅ Ism</label><input id="i2"></p>
    <p><label for="t2">Telefon</label><input id="t2"></p>
    <p><label for="s2">Sana</label><input id="s2"></p>
  </form>
</div>

Nimaga qarang: chapdagi formada yorliq tepadagi maydondan 16, o'z maydonidan 12 piksel uzoqda — farq kichik. Ko'z "Telefon" yorlig'ini qaysi maydonga tegishli ekanini bir lahza o'ylab topadi. O'ngda yorliq o'z maydoniga 4 piksel, oldingi guruhdan 24 piksel — har juftlik aniq bitta blok. Chrome'da o'lchadik: chapda "Telefon" yorlig'ining tepasi yuqoridagi maydon pastidan 16, o'ngda 24 piksel pastda.

Tekshirib ko'ring: Kartaning ichki chegarasi (padding) 24, kartalar orasi 16. Qoida buzilganmi? Karta chegarasi va soyasi bo'lsa-chi?

5. Sarlavha va margin collapsing

Sarlavhalar — qoidaning eng ko'p buziladigan joyi. Brauzer h2 ga tepadan ham, pastdan ham bir xil margin beradi: 0.83em (Brauzerning o'z CSS'i). Natijada sarlavha oldingi bo'limdan ham, o'z matnidan ham bir xil uzoqlikda "osilib" turadi. Ko'z uni qaysi bo'limga tegishli ekanini bilmaydi.

To'g'risi: sarlavha o'z matniga yaqin, oldingi bo'limdan uzoq. Birinchi urinish:

h2 {
  margin-block: var(--masofa-xl) var(--masofa-xs);
}

Lekin Chrome'da o'lchasangiz, sarlavha bilan undan keyingi paragraf orasi 8 emas, 16 piksel chiqadi. Margin sirlari darsidagi margin collapsing — ikki qo'shni vertikal margin qo'shilmaydi, kattasi qoladi. Bu yerda h2 ning pastki 8 pikseli va p ning brauzer bergan tepa 1em i (16 piksel) "bir-birini yutdi" — 16 yutdi.

Yechim — sarlavhadan keyingi elementning tepa margin'ini olib tashlash:

h2 {
  margin-block: var(--masofa-xl) var(--masofa-xs);
}

:where(h2) + * {
  margin-block-start: 0;
}

:where() og'irligi nol (Mantiqiy pseudo-klasslar) — karta yoki forma o'z masofasini bersa, bu qoida unga xalaqit bermaydi. Endi sarlavha matnga 8, oldingi bo'limga 32 piksel. Nisbat 1:4 — ko'z sarlavhani darhol pastdagi matn bilan birlashtiradi.

Tekshirib ko'ring: h3 ning pastki margin'i 8 piksel, undan keyingi p ning tepa margin'i 12 piksel. Ular orasida necha piksel bo'ladi? :where(h3) + * { margin-block-start: 0; } qo'shilsa-chi?

6. Vertikal ritm

Vertikal ritm (vertical rhythm) — sahifadagi vertikal masofalarning bir asosga bo'ysunishi. Musiqadagi ritm kabi: notalar har xil, lekin bitta takt ichida.

Klassik yondashuvda asos — matnning qator balandligi. «Bahor»da body 16 piksel va line-height: 1.5: bir qator 24 piksel — ya'ni aynan 3 × 8. Paragraflar orasi 16 yoki 24, bo'limlar orasi 48 — hammasi 8 ga, ko'pchiligi 24 ga karrali. Sahifani chizg'ichga qo'ysangiz, qatorlar va bloklar bir xil "katak" bo'yicha terilganini ko'rasiz.

Amalda qat'iy ritmni ushlab turish qiyin: sarlavhalar boshqa shriftda, rasmlarning bo'yi ixtiyoriy, fluid matn 18 pikselda bir qatorni 27 qiladi. Shuning uchun zamonaviy loyihalar "qattiq katak" o'rniga yumshoqroq qoidani oladi: vertikal masofalar faqat shkaladan. Shunda ritm to'liq bo'lmasa ham, sahifa tartibli ko'rinadi.

Buning uchun oddiy qoida: tepadan yoki pastdan — bittasini tanlang. «Bahor» masofani oldingi element va keyingisi orasiga * + * bilan qo'yadi (tepa margin). Bir element tepa, boshqasi past margin bersa, collapsing tufayli natijani oldindan aytish qiyinlashadi.

7. Komponent ichidagi va layout masofalari

7.1 Komponent ichi: padding

Komponent ichki masofasi uning o'lchamiga bog'liq. Tugmada eng keng tarqalgan nisbat — gorizontal padding vertikaldan ikki barobar katta: 0.75rem 1.5rem (12 va 24). Matn yon tomondan ko'proq "nafas" talab qiladi.

Tugmaning padding'ini em da yozish ham mumkin: 0.5em 1em. Shunda katta tugma (shrifti katta) o'z-o'zidan kattaroq padding oladi. Lekin 18 pikselli shriftda 0.5em — 9 piksel, to'rdan chiqadi. Tanlov: tokenlar (to'r aniq) yoki em (nisbat aniq). Kursda: kartalar va bo'limlar — tokenlar, tugma — em (Chegara va soyalar darsidagi tugma shunday edi).

7.2 Layout: gap

Elementlar orasidagi masofani ota beradi — gap (Flex'da tekislash, Grid'ga kirish). U margin'dan yaxshiroq: collapsing yo'q, birinchi va oxirgi element atrofida ortiqcha joy yo'q, qator va ustun masofasi alohida.

Qoida: ichki masofani komponent o'zi beradi (padding), tashqi masofani esa ota beradi (gap yoki margin). Karta o'zining tashqi margin'ini bilmasligi kerak — u menyuda ham, bosh sahifada ham, yon panelda ham turishi mumkin. Bu CSS metodologiyalari darsidagi CUBE CSS g'oyasi bilan bir xil: layout — alohida qatlam.

7.3 Bo'limlar orasi: juftlik tokenlari

Bo'limlar orasi telefonda katta bo'lsa, ekran tez "bo'shab" qoladi. Kompyuterda esa kichik masofa siqiq ko'rinadi. Shuning uchun «Bahor»da juftlik tokeni bor: --masofa-s-l — telefonda 12, kompyuterda 27 (Dizayn tokenlari). Masofa ekran bilan kuchliroq o'sadi — bu Utopia'ning juftlik g'oyasi (Fluid tipografiya).

8. Zichlik: zich va keng

8.1 Nega kerak?

Bir xil ma'lumot turli joyda turli zichlikda ko'rsatiladi. Mehmon uchun menyuda — keng, havodor karta. Oshxonadagi planshetda Rustam aka uchun 40 ta buyurtma ro'yxati — zich, bir ekranga ko'proq sig'sin. Admin panellar, jadvallar, pochta ilovalari ko'pincha "zichlik" sozlamasini beradi: compact (zich) va comfortable (keng).

Material Design'da bu shkala bilan qilinadi: 0 — standart, −1, −2, −3 — har qadam komponent balandligini 4dp ga kamaytiradi. Yana o'sha 4/8 to'r.

8.2 Tokenlar bilan zichlik

Masofa tokenlarda bo'lsa, zichlik — bitta blokda tokenlarni qayta aniqlash (CSS o'zgaruvchilari 2). Komponentning o'ziga tegilmaydi:

<style>
  :root {
    --masofa-xs: 0.5rem;
    --masofa-s: 0.75rem;
    --masofa-m: 1rem;
  }
  .zich {
    --masofa-xs: 0.25rem;
    --masofa-s: 0.5rem;
    --masofa-m: 0.5rem;
  }
  body { font-family: system-ui, sans-serif; background: #fffaf0; }
  .juft {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    gap: 2rem;
  }
  ul {
    width: 15rem;
    margin: 0;
    padding: var(--masofa-xs);
    list-style: none;
    background: white;
    border-radius: 0.5rem;
  }
  li {
    display: flex;
    justify-content: space-between;
    padding: var(--masofa-s) var(--masofa-m);
  }
  li + li { border-block-start: 1px solid #e3ded3; }
  .narx { color: #b4461a; font-variant-numeric: tabular-nums; }
</style>
<div class="juft">
  <ul aria-label="Keng">
    <li>Osh <span class="narx">35 000</span></li>
    <li>Lag'mon <span class="narx">28 000</span></li>
    <li>Manti <span class="narx">30 000</span></li>
    <li>Ko'k choy <span class="narx">5 000</span></li>
  </ul>
  <ul class="zich" aria-label="Zich">
    <li>Osh <span class="narx">35 000</span></li>
    <li>Lag'mon <span class="narx">28 000</span></li>
    <li>Manti <span class="narx">30 000</span></li>
    <li>Ko'k choy <span class="narx">5 000</span></li>
  </ul>
</div>

Nimaga qarang: ikkala ro'yxat uchun CSS qoidasi bitta. O'ngdagi ro'yxat faqat .zich blokida tokenlarni kichraytirdi — qatorlar pastroq, ro'yxat kaltaroq. Zich variantda ham qiymatlar shkaladan (4, 8) — to'r buzilmadi. Chrome'da o'lchadik: keng ro'yxat 199, zich ro'yxat 159 piksel baland. .zich — faqat namoyish class'i.

Diqqat: Zichlikni kamaytirganda bosish maydonini unutmang. Zich qatorlar bosiladigan bo'lsa ham, kamida 24×24 piksel qolsin (O'lchamlar). Telefonda zich rejimni umuman bermaslik ham to'g'ri qaror.

9. Ko'p uchraydigan xatolar

9.1 "Chamalangan" son

margin-top: 13px, padding: 7px 11px. Tuzatish: har qiymat — tokendan. Shkalada yo'q son kerak bo'lsa — bu dizayn savoli, jim qaror emas.

9.2 Ichki masofa tashqisidan katta

Karta ichida 32, kartalar orasida 16. Tuzatish: ichki ≤ tashqi. Ichkini kamaytiring yoki tashqini oshiring.

9.3 Sarlavha "osilib" turibdi

Brauzerning h2 margin'lari tepada va pastda teng. Tuzatish: tepa — katta, past — kichik, keyingi elementning tepa margin'i — 0 (collapsing).

9.4 Komponent o'z tashqi margin'ini beradi

.taom-karta { margin-bottom: 24px; } — yon panelda ham, oxirgi kartada ham ortiqcha joy. Tuzatish: tashqi masofani ota beradi — gap yoki * + *.

9.5 Shkalada juda ko'p qadam

--masofa-1 dan --masofa-20 gacha, har biri 4 piksel farq bilan. Tuzatish: 7–9 qadam, qo'shnilari kamida 25% farq.

9.6 Hamma joyda bir xil masofa

Har narsa orasida 16. Tartibli ko'rinadi, lekin guruhlar yo'q — sahifa bir tekis "devor". Tuzatish: kamida uch daraja: element ichida kichik, guruh ichida o'rta, guruhlar orasida katta.

10. Mashqlar

1-mashq (oson): shkalaga moslang

Stajyorning qiymatlari: 5px, 10px, 14px, 18px, 30px, 50px. Har birini «Bahor» shkalasidagi eng yaqin tokenga almashtiring (telefondagi qiymatlar: 4, 8, 12, 16, 24, 32, 48).

Ishora: "«Bahor» shkalasi" jadvali. Teng uzoqlikda bo'lsa — kattasini tanlang (bo'sh joy ko'p bo'lgani yaxshiroq).

2-mashq (o'rta): kategoriya sarlavhalari

«Bahor» menyu sahifasida kategoriyalar bor: "Issiq taomlar", "Ichimliklar". Har kategoriya — section, ichida h2 va taom kartalari ro'yxati (ul). Hozir hamma masofa brauzerniki. Yozing:

1. Bo'limlar orasi — --masofa-2xl.
2. Sarlavha kartalardan --masofa-s uzoqlikda.
3. Kartalar orasi — --masofa-l, margin emas.

Ishora: "Sarlavha va margin collapsing" va "Layout: gap" bo'limlari. ul ni flex ustun yoki grid qilsangiz, gap ishlaydi.

main > section + section {
  margin-block-start: var(--masofa-2xl);
}

section > h2 {
  margin-block: 0 var(--masofa-s);
}

section > ul {
  display: grid;
  gap: var(--masofa-l);
  margin: 0;
  padding: 0;
  list-style: none;
}

3-mashq (qiyin): tugmaning zich varianti

«Bahor» .bron-havola tugmasiga padding: var(--masofa-s) var(--masofa-l) va line-height: 1.25 berilgan deylik — telefonda u 44 piksel baland. Admin panel uchun zich variant kerak: balandligi 36 piksel, shkaladan chiqmasdan.

1. Material'ning zichlik qadamini eslang. 44 dan 36 ga nechta qadam?
2. Faqat tokenlarni qayta aniqlab, qoidaga tegmasdan zich variantni yozing.
3. Zich tugma WCAG 2.5.8 dan (bosish maydoni kamida 24×24 piksel, O'lchamlar) o'tadimi?

Ishora: tugma balandligi = 2 × tik padding + qator balandligi. 16 pikselli shriftda line-height: 1.25 — 20 piksel.

.bron-havola {
  padding: var(--masofa-s) var(--masofa-l);
  line-height: 1.25;
}

[data-zichlik="zich"] {
  --masofa-s: 0.5rem;
  --masofa-l: 1rem;
}

4-mashq: Portfolio qadami — sarlavhalar va to'rdan chiqqan qiymatlar

Portfolio tokenlari Dizayn tokenlari darsidan beri qat'iy 4/8 to'rda (rem). Lekin ikki joy qoldi:

1. Sarlavhalar. Bosh sahifadagi h2 lar brauzerning teng margin'lari bilan "osilib" turibdi. Ularni oldingi bo'limdan --masofa-xl, o'z matnidan --masofa-xs uzoqlikka qo'ying. Collapsing'ni hisobga oling.
2. em dagi masofalar. Tokenlar rem qiymatlarni almashtirgan edi, em lar esa qoldi: details[name="savollar"] ning 0.25em 0.75em padding'i va maydonlarning 0.5em i. Ular kompyuterda (shrift 18 piksel) qancha piksel bo'ladi? Qaysi biri tokenga o'tsin, qaysi biri qolsin — qaror qiling.
3. Loyihalar kartalarini tekshiring: ichki padding va kartalar orasi "ichki ≤ tashqi" qoidasiga mosmi (360 va 1280 pikselda)?

Ishora: h2 qoidasi asos.css da. :where() bilan yozsangiz, kartalardagi h2 (.loyihalar > article > * { margin: 0 }) buzilmaydi. em ning piksel qiymati — o'sha elementning shriftiga ko'paytiriladi (O'lcham birliklari).

/* Sarlavha o'z matniga yaqin (Spacing tizimi darsi) */
:where(h2) {
  margin-block: var(--masofa-xl) var(--masofa-xs);
}

:where(h2) + * {
  margin-block-start: 0;
}

input:not([type="radio"]),
textarea {
  padding: 0.5em; /* shrift bilan o'sadi — ataylab em */
}

11. Real ishda

• Dizayn tizimlari. Material Design, Apple, Atlassian, GitHub Primer — hammasida masofa shkalasi hujjatning birinchi sahifalarida. Primer'da --base-size-4, --base-size-8 kabi tokenlar.
• Figma. Dizaynerlar maketda "nudge" qadamini 8 ga sozlaydi: strelka tugmasi bilan element 8 piksel suriladi. Auto Layout'dagi masofalar ham tokenlardan tanlanadi (Figma dasturchi uchun 2).
• Kod ko'rigi. "Nega bu yerda 13px?" — kod ko'rigida tez-tez uchraydigan izoh. Stylelint'ga (Stylelint va Prettier) xom px qiymatlarni taqiqlaydigan qoida qo'shiladi.
• Intervyuda so'raladi: "8pt grid nima va nega?", "Margin collapsing qachon bo'ladi?", "Gap va margin farqi?".

Xulosa

• 4/8 pt to'r: hamma masofa 8 ning (kichik joyda 4 ning) karralisi — har ekran zichligida butun piksel, oson bo'linadi, tanlov kam.
• Shkala — zinapoya: 4, 8, 12, 16, 24, 32, 48, 64; qo'shni qadamlar kamida 25% farq qiladi; CSS'da --masofa-* tokenlari.
• Ichki ≤ tashqi: element ichida kichik, guruh ichida o'rta, guruhlar orasida katta masofa.
• Sarlavha o'z matniga yaqin; collapsing'ni :where(h2) + * bilan boshqaring.
• Ichki masofa — komponentning padding i, tashqi — otaning gap i.
• Zichlik — tokenlarni bir blokda qayta aniqlash; bosish maydoni ≥ 24 piksel qoladi.

Keyingi dars: Rang nazariyasi amalda: palitra qurish — bitta brend rangidan 50–950 shkala, neytral kulranglar va xato-muvaffaqiyat ranglarini oklch bilan quramiz.

Manbalar

• Material Design: "Spacing methods", "Applying density" — m2.material.io; "Density" — m3.material.io
• Adam Wathan, Steve Schoger: "Refactoring UI" (2018) — "Establish a spacing and sizing system"
• Heydon Pickering: "Axiomatic CSS and Lobotomized Owls" (2014) — alistapart.com
• Tailwind CSS: "Theme variables" (--spacing) — tailwindcss.com/docs
• Utopia: "Fluid space calculator" — utopia.fyi