CSS line-height va letter-spacing: qator balandligi va harf oralig'i

Qisqacha: line-height — bir qator matn egallaydigan balandlik. Uni birliksiz son bilan yozing: oddiy matn uchun 1.5, sarlavha uchun 1.1–1.2. Birliksiz son har elementda o'z shriftidan qayta hisoblanadi, em yoki % esa tayyor pikselni meros qoldiradi va katta sarlavha qatorlari ustma-ust tushadi. Harflar orasini letter-spacing o'zgartiradi — katta harfli yozuvlarda u biroz kengaytiriladi.

Bu darsda

• Qator qutisi, interlinyaj va yarim interlinyaj (half-leading) nima ekanini tushuntirasiz.
• line-height ni birliksiz yozasiz va em bilan meros tuzog'ini raqamlar bilan ko'rsatasiz.
• Katta harfli yorliqlar va sarlavhalar uchun letter-spacing tanlaysiz, uning tuzoqlarini bilasiz.
• text-box bilan tugma matnini markazlaysiz.
• vertical-align bilan ikonka va izoh raqamlarini matnga tekislaysiz.

Oldin bilishingiz kerak: Shrift asoslari, Meros va qiymat bosqichlari, O'lcham birliklari, Box model.

1. Nega bu kerak?

Otabek telefonda «Bahor» blogidagi maqolani o'qiyapti: "Rustam akaning osh sirlari". Matn uzun, qatorlar bir-biriga yopishib turibdi. Ko'zi qator oxiridan keyingi qator boshiga o'tishda adashadi, bitta qatorni ikki marta o'qiydi. Besh daqiqadan keyin u sahifani yopdi.

Maktabdagi daftarlarni eslang. Birinchi sinf daftarida chiziqlar keng — harf yozish oson. Tor chiziqli daftarda esa yozuv zich va o'qish qiyin. Matn ham xuddi shunday: qatorlar orasidagi bo'sh joy o'qishni yengillashtiradi yoki qiyinlashtiradi.

<style>
  p {
    font-family: system-ui, sans-serif;
    max-width: 30rem;
  }
  p:nth-of-type(2) { line-height: 1.5; }
</style>
<p>Rustam aka guruchni kechqurun namlab qo'yadi. Ertalab qozonda
yog'ni qizdiradi, go'shtni qovuradi, keyin sabzini soladi. Sabzi
yumshagach zira qo'shiladi va suv quyiladi. Guruch eng oxirida,
suv qaynagach tekis yoyiladi.</p>
<p>Rustam aka guruchni kechqurun namlab qo'yadi. Ertalab qozonda
yog'ni qizdiradi, go'shtni qovuradi, keyin sabzini soladi. Sabzi
yumshagach zira qo'shiladi va suv quyiladi. Guruch eng oxirida,
suv qaynagach tekis yoyiladi.</p>

Nimaga qarang: matn bir xil, faqat ikkinchi paragrafda line-height: 1.5. Birinchisi zich, ko'z "qator devori"ga uriladi. Ikkinchisida qatorlar nafas oladi. Qatorlar orasi va harflar orasi — shu darsning mavzusi.

2. Qator qanday quriladi

2.1 Matn maydoni va interlinyaj

Brauzer har qatorni ko'rinmas qutiga joylaydi — qator qutisi (line box). Uning balandligi — line-height.

Qator ichidagi harflar esa o'z balandligiga ega. Shriftda yuqoriga cho'ziladigan harflar ("b", "l", bosh harflar va urg'ular) va pastga tushadiganlar ("y", "g", "q") uchun joy bor. Bu joy matn maydoni (content area) deyiladi. Uni shrift dizayneri belgilaydi.

line-height bilan matn maydoni orasidagi farq — interlinyaj (leading). Nomi bosmaxonadan: qadim bosmachilar metall harf qatorlari orasiga ingichka qo'rg'oshin (inglizcha lead) plastinkalar qo'yishgan. Brauzer bu farqni ikkiga bo'ladi: yarmi matn ustiga, yarmi ostiga. Har yarmi yarim interlinyaj (half-leading) deyiladi.

<link rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Lora">
<style>
  p {
    font-family: Lora, serif;
    font-size: 1.25rem;
    line-height: 2.5rem;
    max-width: 18rem;
    outline: 1px dashed #5b6660;
  }
  span { background-color: #f6d9a8; }
</style>
<p><span>Rustam aka oshni har kuni ertalab o'tin olovida,
katta qozonda damlaydi.</span></p>

Nimaga qarang: sariq yo'laklar — har qatorning matn maydoni. Ular orasidagi oq bo'shliq — interlinyaj: tepadagi qatorning pastki yarmi va keyingisining yuqori yarmi. Kesik chiziq — paragraf chegarasi: birinchi qator tepasida va oxirgi qator ostida ham xuddi shu yarim interlinyaj bor.

Chrome'da o'lchadik: 20 piksellik Lora'da matn maydoni 25 piksel, qator esa 40 piksel. Farq 15 piksel — har tomonda 7.5 pikseldan:

flowchart TB
  subgraph Q["Qator qutisi: 40px"]
    direction TB
    A["yarim interlinyaj: 7.5px"] --- B["matn maydoni: 25px"]
    B --- C["yarim interlinyaj: 7.5px"]
  end

Nimaga qarang: qator qutisi uch qavatdan iborat. Harflar faqat o'rtadagi matn maydonida. line-height ni kattalashtirsangiz, faqat ustki va pastki qavat qalinlashadi.

2.2 normal — shriftga bog'liq

line-height ning boshlang'ich qiymati — normal. U "shrift o'zi aytganicha" degani va har shriftda boshqacha. Chrome'da 100 piksellik matn bilan o'lchadik:

Xulosa: normal ga tayansangiz, shrift almashganda qator oralig'i ham o'zgaradi. Uzun matn uchun esa 1.15 juda zich. Shuning uchun line-height ni doim o'zingiz bering.

Tekshirib ko'ring: 16 piksellik matnda line-height: 1.5. Qator qutisi necha piksel? Matn maydoni 21 piksel bo'lsa, yarim interlinyaj qancha?

3. Qiymat turlari va meros tuzog'i

3.1 To'rt xil yozuv

p {
  line-height: 1.5;    /* birliksiz son */
  line-height: 24px;   /* uzunlik */
  line-height: 1.5em;  /* uzunlik, shriftga nisbatan */
  line-height: 150%;   /* foiz */
}

Bitta paragrafda to'rttasi ham bir xil natija beradi: 16 × 1.5 = 24 piksel. Farq faqat meros paytida chiqadi. Meros va qiymat bosqichlari darsida o'sha tuzoqni oldindan aytgan edik: bolaga otaning hisoblangan qiymati o'tadi.

• 1.5em va 150% ota elementda pikselga aylanadi: 24px. Bola tayyor "24px" ni oladi — uning shrifti qancha bo'lishidan qat'i nazar.
• Birliksiz 1.5 esa son bo'lib qoladi. Bola "1.5" ni oladi va uni o'z shriftiga ko'paytiradi.

flowchart TD
  A["article: 16px, line-height: 1.5em"] --> B["hisoblangan: 24px"]
  B --> C["h2: 32px shrift, qator 24px"]
  D["article: 16px, line-height: 1.5"] --> E["hisoblangan: 1.5"]
  E --> F["h2: 32px shrift, qator 48px"]

Nimaga qarang: chap zanjirda sarlavha 32 piksellik harflarni 24 piksellik qatorga sig'dirishga majbur. O'ng zanjirda qator shriftga moslashdi: 32 × 1.5 = 48.

3.2 Tuzoq o'z ko'zingiz bilan

«Bahor» blogidagi maqola. article ga 1.5em berilgan, ichidagi sarlavha esa ikki qatorga o'raladi:

<style>
  article {
    font-family: system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.5em;
    max-width: 18rem;
  }
  h2 { font-size: 2rem; }
</style>
<article>
  <h2>Rustam akaning osh sirlari</h2>
  <p>Guruch kechqurun namlanadi, zira esa qo'l bilan ezilib
  solinadi.</p>
</article>

Nimaga qarang: sarlavhaning ikki qatori bir-biriga yopishib, deyarli ustma-ust tushdi. Chrome'da DevTools → Computed'da h2 ning line-height i — 24px, shrifti esa 32px. 1.5em ni 150% ga almashtirsangiz, natija aynan shu.

Endi bitta qatorni o'zgartiramiz:

<style>
  article {
    font-family: system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    max-width: 18rem;
  }
  h2 {
    font-size: 2rem;
    line-height: 1.2;
  }
</style>
<article>
  <h2>Rustam akaning osh sirlari</h2>
  <p>Guruch kechqurun namlanadi, zira esa qo'l bilan ezilib
  solinadi.</p>
</article>

Nimaga qarang: sarlavha qatorlari ajraldi. h2 o'zining 32 pikseliga 1.2 ni ko'paytirdi — 38.4 piksel. Paragraf esa article dan birliksiz 1.5 ni oldi: 24 piksel. Birliksiz 1.5 ning o'zi ham sarlavhani tuzatardi (48 piksel) — 1.2 esa uni ixchamroq qildi.

3.3 Qancha bo'lsin?

• Oddiy matn — 1.5 atrofida. WCAG 1.4.12 (Text Spacing) mezoni foydalanuvchi qatorlarni kamida 1.5 ga kengaytira olishini va sayt bundan buzilmasligini talab qiladi. Uzun matn uchun bu yaxshi boshlang'ich qiymat.
• Sarlavha — 1.1–1.2. Katta harflar o'zi ko'p joy oladi. 1.5 bilan ikki qatorli sarlavha "tarqalib" ketadi.
• Tugma va yorliqlar — 1.2 atrofida. Ular odatda bir qatorli.

O'lcham birliklari darsidagi lh birligini eslang: 1lh — elementning qator balandligi. line-height ni o'zgartirsangiz, margin-top: 1lh kabi bo'shliqlar ham o'zi moslashadi. Shrift asoslari darsidagi font qisqa yozuvida esa line-height o'lchamdan keyin / bilan yoziladi: font: 1rem/1.5 system-ui, sans-serif.

«Bahor» asosiy.css iga:

body {
  line-height: 1.5;
}

h1,
h2,
h3 {
  line-height: 1.2;
}

Tekshirib ko'ring: body da line-height: 150%, ichidagi h1 — 40 piksel. h1 qatori necha piksel? body da 1.5 bo'lsa-chi?

4. letter-spacing — harflar orasi

4.1 Nima qiladi

letter-spacing har harfdan keyin qo'shimcha masofa qo'shadi (yoki manfiy qiymat bilan olib tashlaydi). Atribut selektorlari darsida telefon maydoni uchun letter-spacing: 1px yozgan edik — raqamlar orasi kengroq bo'lib, o'qish osonlashdi.

Birlik sifatida em ni tanlang: 0.05em — shriftning 5 foizi. Shrift kattalashsa, masofa ham u bilan birga o'sadi. px esa har o'lchamda bir xil qoladi va katta sarlavhada sezilmaydi, kichik yozuvda esa haddan tashqari ko'rinadi.

4.2 Qachon kengaytirish, qachon siqish

• Katta harfli yorliqlar — kengaytiring. Bosh harflar kichik harflar orasida turishga mo'ljallangan. Faqat bosh harflardan iborat so'z zich va og'ir ko'rinadi. 0.05–0.1em uni yengillashtiradi.
• Katta sarlavhalar — biroz siqing. Yirik o'lchamda harflar orasi ko'zga keng ko'rinadi. -0.01 dan -0.02em gacha sarlavhani yaxlit qiladi.
• Oddiy matn — tegmang. Shrift dizayneri kichik harflar orasini allaqachon muvozanatlagan.

«Bahor» menyusidagi yangi taomlar yorlig'ini ko'ramiz. Matnni bosh harflarga text-transform: uppercase aylantiradi — HTML'da oddiy harflar qoladi. Bu xususiyatni Matn bezagi darsida to'liq o'rganamiz:

<style>
  :root {
    --rang-urgu: #b4461a;
    --rang-asosiy: #2f6b3a;
  }
  body { font-family: system-ui, sans-serif; }
  p {
    color: var(--rang-urgu);
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0.5rem 0;
  }
  p:nth-of-type(2) { letter-spacing: 0.08em; }
  h1 {
    color: var(--rang-asosiy);
    font-size: 3rem;
    line-height: 1.1;
    margin: 0.5rem 0;
  }
  h1 + h1 { letter-spacing: -0.02em; }
</style>
<p>Yangi taom — tandir go'sht</p>
<p>Yangi taom — tandir go'sht</p>
<h1>Choyxona «Bahor»</h1>
<h1>Choyxona «Bahor»</h1>

Nimaga qarang: ikkinchi yorliq kengroq va yengilroq — bosh harflar "nafas oldi". Pastdagi ikki sarlavhadan ikkinchisi biroz ixchamroq, harflar bir-biriga yaqinlashdi. Farq kichik, lekin ko'z uni sezadi.

4.3 Uch tuzoq

1. Oxirgi harfdan keyin ham joy qo'shiladi. Chrome'da o'lchadik: 20 piksellik "ABC" so'zi 39 piksel edi. letter-spacing: 10px bilan — 69 piksel. Uchta harf, uchta qo'shimcha: oxirgi "C" dan keyin ham 10 piksel. Shuning uchun o'rtaga tekislangan so'z biroz chapga siljigan ko'rinadi. Kichik em qiymatlarda bu sezilmaydi, katta masofada esa o'ng tomonga padding qo'shib muvozanatlanadi.

2. Ligaturalar o'chadi. Variable shriftlar va OpenType darsida "fi" ligaturasini ko'rgan edik. Chrome'da tekshirdik: letter-spacing: 1px qo'yilgach, "fi" ikki alohida harfga ajraldi. Bu to'g'ri xulq — orasi ochilgan harflar qo'shilib turolmaydi.

3. So'zni probel bilan "cho'zmang". B a h o r deb yozilgan sarlavha ekrandagiga o'xshaydi. Lekin ekran o'quvchi uni beshta alohida harf deb o'qiydi: "B, a, h, o, r". Kenglik — faqat CSS ishi.

5. word-spacing — so'zlar orasi

word-spacing so'zlar orasidagi bo'shliqqa masofa qo'shadi. U juda kam kerak bo'ladi. Bitta muhim holat bor — foydalanuvchining o'z sozlamasi.

WCAG 1.4.12 mezoni sayt quyidagi sozlamalarda ham buzilmasligini talab qiladi: qator balandligi — shriftning 1.5 barobari, paragraflar orasi — 2 barobari, harflar orasi — 0.12, so'zlar orasi — 0.16. Zaif ko'ruvchilar buni brauzer kengaytmalari bilan qo'yadi. Agar blokning balandligi qat'iy berilgan bo'lsa (height: 40px), kengaygan matn undan toshib chiqadi yoki kesiladi. Shuning uchun matnli bloklarga qat'iy balandlik bermang — min-height ishlating (O'lchamlar).

6. text-box — matnni tugmada aniq o'rtaga qo'yish

6.1 Muammo

«Bahor»ning "Stolni band qilish" havolasini tugma ko'rinishiga keltiramiz. padding tepada ham, pastda ham bir xil. Lekin matn ko'zga baribir biroz pastroq yoki balandroq ko'rinadi. Nega?

Qator qutisini eslang: unda harflar ustida urg'ular uchun joy, ostida "q" va "y" dumlari uchun joy bor. Bosh harflar va asosiy chiziq esa bu qutining aniq o'rtasida emas. padding ko'rinadigan harflardan emas, qutining chetidan o'lchanadi.

6.2 Yechim

text-box qator qutisini harflarning ko'rinadigan chetigacha qirqadi:

.bron-havola {
  text-box: trim-both cap alphabetic;
}

• trim-both — tepa va pastni qirq (trim-start — faqat tepani, trim-end — faqat pastni).
• cap — tepa chegara bosh harf tepasida bo'lsin.
• alphabetic — pastki chegara asosiy chiziqda (baseline) bo'lsin — "a", "o" kabi harflar turadigan chiziq.

Endi padding bosh harf tepasidan va asosiy chiziqdan o'lchanadi:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-fon: #fffaf0;
  }
  .bron-havola {
    display: inline-block;
    font-family: system-ui, sans-serif;
    font-size: 1.25rem;
    padding: 0.75em 1.25em;
    margin: 0.25rem;
    background-color: var(--rang-asosiy);
    color: var(--rang-fon);
    text-decoration: none;
  }
  .bron-havola + .bron-havola {
    text-box: trim-both cap alphabetic;
  }
</style>
<a class="bron-havola" href="bron/">Stolni band qilish</a>
<a class="bron-havola" href="bron/">Stolni band qilish</a>

Nimaga qarang: ikkinchi tugma pastroq (ixchamroq) — qator qutisining ortiqcha qismlari qirqildi. Unda bosh harf tepasidan tugma chetigacha va asosiy chiziqdan pastki chetgacha bir xil masofa. Chrome'da Windows'da o'lchadik: birinchi tugma 57 piksel, ikkinchisi — 44.

Birinchisida harflar ustidagi bo'shliq ostidagidan taxminan 2–3 piksel ko'p — matn sal pastga "cho'kkan". Ikkinchisida "q" ning dumi pastki padding ga chiqadi — bu normal, ko'z asosiy chiziqqa qaraydi.

display: inline-block — havolani padding i to'liq ishlaydigan "quti"ga aylantiradi (display darsida ko'rgansiz). Tugma ko'rinishini Tugmalar tizimi darsida to'liq quramiz.

6.3 Baseline: yangi

Baseline ma'lumotlariga ko'ra, text-box xususiyatining o'zi 2026-yil avgustdan beri to'rt asosiy brauzerning hammasida bor — bu yangi Baseline. Lekin misoldagi cap va alphabetic qiymatlari hozircha Chrome, Edge va Safari'da bor, Firefox'da esa yo'q — u butun text-box: trim-both cap alphabetic qatorini tushunmaydi. Eski brauzerlarda ham u ishlamaydi. Lekin xavfsiz: tushunmagan brauzer bu qatorni tashlab ketadi va tugma birinchi ko'rinishda qoladi — biroz balandroq, lekin buzilmagan. Bu progressive enhancement (Brauzer mosligi).

Bir ogohlantirish: text-box bilan padding "ixchamroq" bo'ladi. Tugma eski brauzerda ham, yangisida ham yaxshi ko'rinsin desangiz, padding ni ikkala holatda sinab ko'ring.

7. vertical-align — qator ichida tekislash

7.1 Nima uchun va qayerda

vertical-align qator ichidagi elementni boshqa matnga nisbatan yuqoriga yoki pastga suradi. U faqat qator ichidagi (inline) elementlarda — span, img, svg, inline-block — va jadval kataklarida ishlaydi.

Eng ko'p tarqalgan xato: blokni vertikal markazlash uchun vertical-align: middle yozish. Blokka u ta'sir qilmaydi. Blokni markazlash — Flex naqshlari va markazlash darsida.

Asosiy qiymatlar: baseline (boshlang'ich — asosiy chiziqda), middle, top, bottom, text-top, text-bottom, sub, super va uzunlik (-0.125em).

7.2 Ikonka matn yonida

«Bahor» ish vaqti yonida kichik soat ikonkasi:

<style>
  p {
    font-family: system-ui, sans-serif;
    font-size: 1.5rem;
    margin: 0.5rem 0;
  }
  svg {
    width: 1em;
    height: 1em;
    fill: #2f6b3a;
  }
  p:nth-of-type(2) svg { vertical-align: middle; }
  p:nth-of-type(3) svg { vertical-align: -0.125em; }
</style>
<p><svg viewBox="0 0 10 10" aria-hidden="true">
  <circle cx="5" cy="5" r="5"/></svg> Ochiq: 7:00–23:00</p>
<p><svg viewBox="0 0 10 10" aria-hidden="true">
  <circle cx="5" cy="5" r="5"/></svg> Ochiq: 7:00–23:00</p>
<p><svg viewBox="0 0 10 10" aria-hidden="true">
  <circle cx="5" cy="5" r="5"/></svg> Ochiq: 7:00–23:00</p>

Nimaga qarang: birinchi qatorda doiraning pastki cheti asosiy chiziqda turibdi, shuning uchun u harflardan balandroq ko'tarilgan. Ikkinchi qatordagi middle uni kichik harflar o'rtasiga tushirdi. Uchinchi qatordagi -0.125em — ikonka kutubxonalarida keng tarqalgan qiymat: ikonkani asosiy chiziqdan sal pastga tushirib, raqamlar bilan bir bo'yda qiladi.

Qaysi biri chiroyli — shriftga bog'liq, ko'z bilan tanlang. Ikonka tizimini SVG'ni CSS bilan stillash darsida quramiz.

img ham qator ichidagi element. Shuning uchun rasm ostida "tushunarsiz" bo'shliq qoladi: rasm asosiy chiziqda turadi, ostida esa "y" dumlari uchun joy bor. Buni Rasm va media elementlarini stillash darsida ko'rgansiz.

7.3 sup qatorni kengaytiradi

Menyuda izoh belgisi: "Osh¹ — narx bir porsiya uchun". Brauzer sup ga vertical-align: super va kichikroq shrift beradi. Lekin ko'tarilgan belgi qator qutisidan chiqib ketadi va brauzer qatorni balandlashtiradi. Chrome'da o'lchadik: line-height: 1.5 li ikki qatorli paragraf 48 piksel edi, sup qo'shilgach — 51.3. Birinchi qator boshqalaridan kengroq bo'lib qoldi.

Tuzatish — bitta qator:

sup {
  line-height: 0;
}

Tekshirdik: paragraf yana 48 piksel. sup endi qator balandligiga ta'sir qilmaydi, lekin baribir yuqorida chiziladi.

8. Ko'p uchraydigan xatolar

8.1 line-height birlik bilan berilgan

body { line-height: 1.5em; } — hamma sarlavha 24 piksellik qatorni meros oladi va ko'p qatorli sarlavhalar ustma-ust tushadi. 150% ham xuddi shunday. Tuzatish: birliksiz 1.5.

8.2 Bir qatorli "markazlash hiylasi"

Eski kodlarda: height: 40px; line-height: 40px; — tugma matni o'rtada chiqadi. Matn ikki qatorga o'ralsa (telefonda yoki katta shriftda), ikkinchi qator tugmadan tashqariga chiqadi. Tuzatish: height va katta line-height o'rniga padding, kerak bo'lsa text-box.

8.3 letter-spacing pikselda

Sarlavhada letter-spacing: 2px — mobil versiyada shrift kichraysa ham 2 piksel qoladi va nisbatan keng ko'rinadi. Tuzatish: em da yozing: 0.05em.

8.4 vertical-align blokda

div { vertical-align: middle; } — hech narsa bo'lmaydi. Tuzatish: u faqat qator ichidagi elementlar va jadval kataklari uchun. Blokni markazlash — flexbox yoki grid.

8.5 Matnli blokda qat'iy balandlik

height: 3rem li karta — foydalanuvchi qator balandligini kattalashtirsa yoki shriftni o'stirsa, matn toshib chiqadi (WCAG 1.4.12). Tuzatish: min-height.

9. Mashqlar

1-mashq (oson): Kim nechaga teng?

section {
  font-size: 1rem;
}
.a { line-height: 2em; }
.b { line-height: 2; }
h3 { font-size: 1.5rem; }

class="a" li section ichidagi h3 qatori necha piksel? class="b" li section ichidagisi-chi? (Sozlama Medium, 16px.)

Ishora: meros qoidasi — em ota'da pikselga aylanadi, birliksiz son esa bolada qayta hisoblanadi.

2-mashq (o'rta): «Bahor» blog maqolasi

Blog maqolasi uchun asosiy.css ga yozing:

1. article matni — qator balandligi 1.6.
2. article ichidagi h2 — 2rem, qator balandligi 1.15, harflar orasi -0.01em.
3. Maqola sanasi (time) — katta harflarda, 0.875rem, harflar orasi 0.06em, rangi --rang-ikkinchi.

Ishora: katta harflar — text-transform: uppercase (yangi taom yorlig'idagi kabi). Ranglar — CSS o'zgaruvchilari darsidagi «Bahor» palitrasi.

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-ikkinchi: #5b6660;
  }
  article {
    font-family: system-ui, sans-serif;
    line-height: 1.6;
    max-width: 32rem;
  }
  article h2 {
    color: var(--rang-asosiy);
    font-size: 2rem;
    line-height: 1.15;
    letter-spacing: -0.01em;
  }
  article time {
    color: var(--rang-ikkinchi);
    font-size: 0.875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
</style>
<article>
  <h2>Rustam akaning osh sirlari: guruch, zira va sabr</h2>
  <p><time datetime="2026-09-20">20-sentabr, 2026</time></p>
  <p>Yaxshi osh ertalab emas, kechqurun boshlanadi. Rustam aka
  guruchni tuzli suvga namlab qo'yadi va ertalabgacha tegmaydi.
  Zira qo'lda eziladi — shunda hidi qozonga to'liq chiqadi.</p>
</article>

3-mashq (qiyin): Taom kartasini tuzating

Stajyor taom kartasini yozdi. Telefonda sarlavha qatorlari ustma-ust tushdi, tugma matni ikki qatorga o'ralganda tugmadan chiqib ketdi, narx yonidagi ikonka esa "osilib" turibdi:

.taom-karta {
  line-height: 1.4em;
}
.taom-karta h3 {
  font-size: 1.75rem;
}
.taom-karta a {
  display: inline-block;
  height: 40px;
  line-height: 40px;
  padding: 0 16px;
  letter-spacing: 3px;
}
.taom-karta svg {
  vertical-align: baseline;
}

Har bir muammoning sababini ayting va kodni tuzating.

Ishora: meros tuzog'i, bir qatorli "markazlash hiylasi", letter-spacing tuzoqlari va ikonka tekislash bo'limlari.

.taom-karta {
  line-height: 1.4;
}
.taom-karta h3 {
  font-size: 1.75rem;
  line-height: 1.2;
}
.taom-karta a {
  display: inline-block;
  padding: 0.6em 1em;
  letter-spacing: 0.02em;
  text-box: trim-both cap alphabetic;
}
.taom-karta svg {
  vertical-align: -0.125em;
}

4-mashq: Portfolio qadami — o'qish qulayligi

Portfolio'ning matnli sahifalariga (ayniqsa "Men haqimda" va «Bahor» loyiha sahifasi) qator oraliqlarini bering.

1. body — qator balandligi 1.5, birliksiz.
2. h1, h2 — 1.2. h1 ga yana letter-spacing: -0.01em: u Matematik funksiyalar darsidan beri clamp() bilan katta o'lchamda.
3. sup bor bo'lsa — qatorni kengaytirmasin.
4. Chrome'da "Men haqimda" sahifasini oching va DevTools → Computed'da h1 va p ning line-height ini tekshiring: ikkalasi ham o'z shriftiga mos bo'lsin.

Ishora: "Qancha bo'lsin?" va "sup qatorni kengaytiradi" bo'limlari.

body {
  line-height: 1.5;
}

h1,
h2 {
  line-height: 1.2;
}

h1 {
  letter-spacing: -0.01em;
}

sup {
  line-height: 0;
}

<link rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Rubik:wght@300..900">
<style>
  body {
    font-family: system-ui, sans-serif;
    color: #1f2a24;
    background-color: #f7faf8;
    line-height: 1.5;
  }
  h1,
  h2 {
    font-family: Rubik, system-ui, sans-serif;
    color: #1f6f4a;
    line-height: 1.2;
  }
  h1 {
    font-size: clamp(1.75rem, 1.25rem + 2vw, 2.5rem);
    font-weight: 750;
    letter-spacing: -0.01em;
  }
  h2 {
    font-size: 1.375rem;
    font-weight: 600;
  }
  main {
    width: min(100% - 2rem, 70ch);
    margin: 0 auto;
  }
</style>
<main>
  <h1>Men haqimda: kollejdan frontend dasturlashga</h1>
  <p>Men Toshkentdanman. Kollejni tugatib, bir yil savdoda
  ishladim. 2026-yil yozida dasturlashni noldan boshladim.</p>
  <h2>Bilimlarim</h2>
</main>

10. Real ishda

• Dizayner maketi qator balandligini ko'pincha foizda beradi: Figma'da "150%" — siz line-height: 1.5 yozasiz. Harflar orasi Figma'da ham foizda: "2%" — letter-spacing: 0.02em.
• Tailwind (tayyor class'lar to'plami, kursda alohida o'rganamiz) leading-* class'lari bilan line-height ni, tracking-* bilan letter-spacing ni beradi.
• Accessibility auditi WCAG 1.4.12 ni tekshiradi: brauzer kengaytmasi qator, harf va so'z oraliqlarini oshiradi, sahifa esa buzilmasligi kerak.
• Intervyuda so'raladi: "line-height ni nega birliksiz yozamiz?", "Half-leading nima?", "vertical-align nega div ni markazlamaydi?".

Xulosa

• Qator qutisi balandligi — line-height; u bilan matn maydoni orasidagi farq ikkiga bo'linib, matn ustiga va ostiga (half-leading) qo'yiladi.
• normal har shriftda boshqacha (1.14–1.33) — qiymatni o'zingiz bering.
• Birliksiz 1.5 har elementda o'z shriftidan hisoblanadi; em va % tayyor pikselni meros qoldiradi — sarlavhalar ustma-ust tushadi.
• letter-spacing — em da: katta harfli yorliqlarga +0.05–0.1em, katta sarlavhaga -0.01–-0.02em; oxirgi harfdan keyin ham joy qo'shadi va ligaturalarni o'chiradi.
• text-box: trim-both cap alphabetic — tugma matnini ko'z uchun o'rtaga qo'yadi (xususiyat — yangi Baseline; cap/alphabetic qiymatlari hali Firefox'da yo'q — tushunmagan brauzer qatorni xavfsiz tashlaydi).
• vertical-align — faqat qator ichidagi elementlar va jadval kataklari uchun; sup { line-height: 0 } qatorni tekis saqlaydi.

Keyingi dars: Matnni o'rash va qatorlarga bo'lish — uzun so'z va havolalar qanday bo'linadi, sarlavhani chiroyli o'rash va hyphens bilan bo'g'in ko'chirish.

Manbalar

• MDN: "line-height", "letter-spacing", "word-spacing", "vertical-align", "text-box", "text-box-trim", "text-box-edge" — developer.mozilla.org
• W3C: "CSS Inline Layout Module Level 3" (half-leading, text-box) — w3.org/TR/css-inline-3
• W3C: WCAG 2.2, "Success Criterion 1.4.12 Text Spacing" — w3.org/WAI/WCAG22/Understanding/text-spacing
• web-features (Baseline ma'lumotlari): "text-box" — github.com/web-platform-dx/web-features