CSS o'lcham birliklari: px, %, em, rem, ch va lh

Qisqacha: CSS'da o'lcham son va birlikdan iborat: 16px, 50%, 1.5rem. px — qat'iy CSS piksel. Qolganlari nisbiy: % — ota elementga, em — elementning shriftiga, rem — sahifa ildizi (html) shriftiga, ch — "0" raqamining eniga, lh — qator balandligiga nisbatan. Shrift va masofalar uchun rem tanlang: foydalanuvchi brauzerda shriftni kattalashtirsa, sayt ham u bilan birga kattalashadi. px esa bu sozlamaga qaramaydi.

Bu darsda

• CSS piksel ekran nuqtasidan nimasi bilan farq qilishini tushuntirasiz.
• % qaysi xususiyatda nimaga nisbatan hisoblanishini bilasiz.
• em qanday "qo'shilib ketishini" ko'rasiz va buni rem bilan tuzatasiz.
• Brauzerdagi shrift sozlamasini o'zgartirib, px va rem farqini o'z ko'zingiz bilan tekshirasiz.
• ch, cap va lh bilan matnga bog'langan o'lcham berasiz.

Oldin bilishingiz kerak: Meros va hisoblangan qiymat, DevTools'da CSS, Responsive rasmlar I, Accessibility nima.

1. Nega bu kerak?

Jasur akaning onasi «Bahor» saytini kompyuterda ochadi. Ko'zi yaxshi ko'rmaydi, shuning uchun nabirasi brauzerda shriftni kattalashtirib qo'ygan. Boshqa saytlarda matn yirik chiqadi. «Bahor» saytida esa — yo'q: menyu mayda, narxlar zo'rg'a o'qiladi.

Sabab bitta: CSS'da hamma o'lcham px bilan yozilgan. font-size: 16px — "doim 16 piksel, foydalanuvchi nima desa ham". Brauzer sozlamasi bu qatorni o'zgartira olmaydi.

Osh damlashni eslang. Tajribali oshpaz suvni litr bilan o'lchamaydi: "suv guruchdan bir barmoq yuqori tursin" deydi. Guruch ko'p bo'lsa, suv ham ko'p. Bu — nisbiy o'lchov: u boshqa narsaga qarab o'zgaradi. "Bir litr suv" esa absolyut o'lchov: guruch qancha bo'lmasin, bir xil.

CSS'da ham ikkala tur bor. Har nisbiy birlikda asosiy savol — "nimaga nisbatan?" Bu darsda har birlik uchun shu savolga javob beramiz. DevTools'da CSS darsida Computed yorlig'ini ko'rgan edingiz — u o'lchamlarni pikselda ko'rsatadi. Bugun o'sha piksellar qayerdan kelishini tushunasiz.

2. Absolyut va nisbiy birliklar

Hozirgacha darslarda asosan px ni ko'rdingiz. Aslida birliklar ko'p. Ular ikki katta oilaga bo'linadi — absolyut va nisbiy. Nisbiylari ham ikki xil: elementga bog'liq va ekranga bog'liq.

Ekran birliklari — keyingi darsning mavzusi. Bugun birinchi ikki qator.

Ikki qoidani CSS nima darsidan eslang: son va birlik orasida bo'sh joy bo'lmaydi (16px, 16 px emas), faqat 0 birliksiz yoziladi.

3. px — CSS piksel

3.1 CSS piksel ekran nuqtasi emas

Responsive rasmlar I darsida ikki xil pikselni farqlagan edik. CSS piksel — sahifa o'lchovlari uchun shartli birlik. Qurilma pikseli — ekrandagi haqiqiy nuqta. Ularning nisbati — DPR: "DPR 3 bo'lgan ekranda har bir CSS piksel ichida 3×3 = 9 ta haqiqiy nuqta bor".

head anatomiyasi darsida Console'dagi buyruq telefon sahifasining enini ko'rsatgan edi: 360–430. Bu ham CSS piksel — telefon ekranidagi haqiqiy nuqtalar ikki-uch barobar ko'p. Demak border: 1px solid DPR 3 li telefonda 3 ta haqiqiy nuqta qalinlikda chiziladi. Bu yaxshi: agar 1px bitta haqiqiy nuqta bo'lganida, zamonaviy telefonda chiziq ko'zga ko'rinmas darajada ingichka bo'lardi. CSS piksel har ekranda taxminan bir xil ko'rinadigan o'lchamni beradi.

Brauzer zoom'i (head anatomiyasi darsida uni o'chirmaslikni aytgan edik) ham shu yerda ishlaydi. Ctrl + + bilan 200% qilsangiz, har CSS piksel ikki barobar katta chiziladi. Sahifa zoom'da hamma narsa kattalashadi — px ham.

3.2 cm, mm, in, pt — qog'oz uchun

CSS'da santimetr va dyuym ham bor. Lekin ular ekrandagi haqiqiy santimetr emas. Standart bo'yicha 1in = 96px, 1cm ≈ 37.8px, 1pt ≈ 1.33px — ekran o'lchami va DPR bilan hech qanday aloqasi yo'q. Chizg'ich bilan o'lchasangiz, har ekranda boshqacha chiqadi.

Ular sahifani chop etish uchun foydali: qog'ozda 2cm haqiqatan 2 santimetr bo'ladi. Chop etish uslublarini kursda keyinroq ko'rasiz. Ekran uchun ularni ishlatmang.

Tekshirib ko'ring: Malikaning telefonida DPR 3. border: 2px solid chizig'i nechta haqiqiy nuqta qalinlikda chiqadi?

4. % — foiz: kimdan foiz?

% ning ma'nosi xususiyatga qarab o'zgaradi. Uni to'rt holatda ko'ramiz.

4.1 width: 50% — ota enining yarmi

Avval ikki yangi xususiyat. width — elementning eni, height — bo'yi. Ikkalasini O'lchamlar darsida chuqur o'rganamiz, hozir faqat foiz uchun kerak.

<style>
  .taom-karta {
    outline: 2px solid #2f6b3a;
    margin-bottom: 12px;
    width: 50%;
  }
  .taom-karta.mashhur {
    width: 240px;
  }
</style>
<article class="taom-karta">Tandir go'sht — 50%</article>
<article class="taom-karta mashhur">Osh — 240px</article>

Tepadagi tugmalar bilan telefon (360px) va kompyuter (1280px) enini almashtirib ko'ring. Nimaga qarang: birinchi karta har safar otasining — body ning — roppa-rosa yarmini egallaydi. Telefonda body ning ichki eni 344 piksel (360 minus ikki chetdagi 8 piksellik margin), karta — 172 piksel. Kompyuterda 1264 va 632. Ikkinchisi doim 240 piksel: telefonda birinchisidan keng, kompyuterda ancha tor.

Karta atrofidagi chiziq — outline (Asosiy selektorlar darsidagi hiyla). U joy egallamaydi, shuning uchun karta eni chiziq bilan o'zgarmaydi.

4.2 height: 50% — ota bo'yi aytilmagan bo'lsa, ishlamaydi

Endi xuddi shu foizni bo'yiga beramiz:

<style>
  section {
    outline: 2px solid #2f6b3a;
    margin-bottom: 12px;
  }
  section + section {
    height: 120px;
  }
  p {
    height: 50%;
    margin: 0;
    outline: 2px dashed #b4461a;
  }
</style>
<section><p>Otaning bo'yi aytilmagan</p></section>
<section><p>Otaning bo'yi — 120px</p></section>

Nimaga qarang: birinchi paragrafning qizg'ish punktiri matnga yopishib turibdi — height: 50% hech narsa qilmadi. Ikkinchisida paragraf 60 piksel: otasining 120 pikselidan yarmi. margin: 0 — brauzer paragrafga qo'yadigan tashqi bo'sh joyni olib tashlaydi, shunda chizmalar aniq ko'rinadi.

Sabab mantiqiy. Odatda otaning bo'yi bolalariga qarab hisoblanadi: ichida qancha matn bo'lsa, shuncha baland. Agar bola "otamning yarmi bo'laman" desa, aylana hosil bo'ladi: ota bolani kutadi, bola otani. Brauzer bu aylanani uzadi va foizni e'tiborsiz qoldiradi. En bilan bunday muammo yo'q: ota eni odatda o'z otasidan keladi va oldindan ma'lum. Bu tuzoqni O'lchamlar darsida to'liq yechamiz.

4.3 padding: 10% — hatto tepasi ham enidan

Kutilmagan qoida: padding va margin dagi foiz to'rt tomonda ham ota elementning eniga nisbatan hisoblanadi. padding-top: 10% — ota bo'yining emas, enining 10 foizi.

Nega shunday? Yuqoridagi aylana sabab: bo'y ko'pincha oldindan noma'lum, en esa ma'lum. Eski saytlarda bu qoidadan video uchun 16:9 nisbatdagi quti yasashda foydalanishgan. Bugun buning uchun alohida xususiyat bor — uni ham O'lchamlar darsida ko'rasiz.

4.4 font-size: 150% — ota shriftidan

Shriftda foiz otaning shrift o'lchamiga nisbatan: ota 16px bo'lsa, font-size: 150% — 24px. Bu keyingi bo'limdagi 1.5em bilan aynan bir xil.

Tekshirib ko'ring: Ota element 600px keng va 200px baland. Bolada padding-top: 10%. Tepadagi bo'sh joy necha piksel?

5. em — shriftga nisbatan

5.1 Qaysi shriftga?

1em — shrift o'lchamiga teng uzunlik. Nom bosmaxonadan qolgan: u yerda bu o'lchov "M" harfining eniga bog'langan edi. Bitta nozik joy bor:

• font-size ichida em — otaning shriftiga nisbatan. Ota 16px bo'lsa, font-size: 1.5em — 24px.
• Boshqa har qanday xususiyatda em — elementning o'z shriftiga nisbatan. Elementning shrifti 24px bo'lsa, padding: 0.5em — 12px.

Ikkinchi qoida em ning eng foydali tomoni. «Bahor»dagi ikki tugmani olamiz: menyudagi «Menyuni ko'rsatish» va bron formasidagi «Stolni band qilish» (Tugmalar va yuborish):

<style>
  button {
    font-size: 14px;
    padding: 0.5em 1em;
    border: 2px solid #2f6b3a;
    color: #2f6b3a;
    background-color: #fffaf0;
  }
  button[type="submit"] {
    font-size: 24px;
  }
</style>
<p><button type="button">Menyuni ko'rsatish</button></p>
<p><button type="submit">Stolni band qilish</button></p>

Nimaga qarang: ikkala tugmaning ichki bo'sh joyi bir xil yozilgan — 0.5em 1em. Lekin katta tugmada bo'sh joy ham kattaroq: 12 va 24 piksel, kichigida — 7 va 14. Matn bilan ramka orasidagi nisbat ikkalasida bir xil — tugma "mutanosib" kattalashdi. px da yozsak, har o'lcham uchun bo'sh joyni qaytadan hisoblashga to'g'ri kelardi.

5.2 Tuzoq: em qo'shilib ketadi

font-size dagi em otadan olinadi. Ota esa o'z navbatida o'z otasidan. Ichma-ich elementlarda nima bo'lishini ko'ramiz. «Bahor» menyusining bo'limlari ichma-ich ro'yxatda:

<style>
  li {
    font-size: 0.8em;
  }
</style>
<ul>
  <li>Taomlar
    <ul>
      <li>Suyuq taomlar
        <ul>
          <li>Sho'rva, mastava</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Nimaga qarang: har bir ichki daraja oldingisidan kichikroq, "Sho'rva, mastava" esa zo'rg'a o'qiladi. Qoida bitta — "li shrifti otasining 80 foizi". Lekin u har darajada qayta ishladi:

• 1-daraja: 16 × 0.8 = 12.8px
• 2-daraja: 12.8 × 0.8 = 10.24px
• 3-daraja: 10.24 × 0.8 = 8.192px

Buni qo'shilib ketish (compounding) deyishadi. Ichki ul otasi bo'lgan li dan kichraygan shriftni meros oladi, keyingi li esa undan yana 80 foiz oladi. DevTools'da uchinchi li ni tanlab, Computed yorlig'ini oching (DevTools'da CSS) — font-size: 8.192px ko'rasiz. Brauzer em ni hisoblab, pikselga aylantirib qo'ygan.

Tekshirib ko'ring: Yuqoridagi qoidani font-size: 1.25em ga o'zgartirsak, uchinchi daraja shrifti necha piksel bo'ladi?

6. rem — sahifa ildiziga nisbatan

6.1 "r" — root, ildiz

rem — "root em", ya'ni ildiz em i. U doim sahifaning ildiz elementi — html ning shriftiga nisbatan hisoblanadi. Ota qanday bo'lishidan qat'i nazar. Brauzerda html shrifti odatda 16px, demak 1rem = 16px, 1.5rem = 24px.

Yuqoridagi menyuni rem bilan qayta yozamiz:

<style>
  li {
    font-size: 0.875rem;
  }
</style>
<ul>
  <li>Taomlar
    <ul>
      <li>Suyuq taomlar
        <ul>
          <li>Sho'rva, mastava</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Nimaga qarang: uchala daraja ham bir xil — 14 piksel (16 × 0.875). rem otaga qaramaydi, shuning uchun qo'shilib ketmaydi.

6.2 Asosiy sabab: foydalanuvchi sozlamasi

"16px ham, 1rem ham 16 piksel bo'lsa, farqi nima?" Farqi dars boshidagi voqeada — Jasur akaning onasi misolida. Sahifa ildizidagi 16 piksel — o'zgarmas qonun emas, brauzer sozlamasi. Accessibility nima darsida zaif ko'ruvchilar shriftni kattalashtirishini aytgan edik. Ular aynan shu sozlamani o'zgartiradi.

Chrome'da uni o'zingiz sinab ko'ring:

1. Chrome'ni oching, manzil qatoriga chrome://settings/appearance deb yozing. Yoki: o'ng yuqoridagi uch nuqta (⋮) → Settings (Sozlamalar) → Appearance (Ko'rinish).
2. Font size (Shrift o'lchami) ro'yxatida beshta variant bor: Very small, Small, Medium (Recommended), Large, Very large.
3. Large ni tanlang va o'z sahifangizni yangilang.

Biz Chrome'da tekshirdik. Variantlar html shriftini shunday o'zgartiradi: Very small — 9px, Small — 12px, Medium — 16px, Large — 20px, Very large — 24px. Uch xil qoida bilan natija:

px da yozilgan matn sozlamaga umuman javob bermadi. rem esa foydalanuvchi xohlagancha kattalashdi. Tekshirib bo'lgach, sozlamani Medium ga qaytaring.

Maslahat: Zoom (Ctrl + +) va shrift sozlamasi — ikki xil narsa. Zoom butun sahifani kattalashtiradi, px ni ham. Shrift sozlamasi esa faqat rem, em va % ga bog'liq o'lchamlarni o'zgartiradi. Kimdir zoom'ni, kimdir shrift sozlamasini ishlatadi — saytingiz ikkalasida ham to'g'ri ishlashi kerak.

6.3 html shriftini px bilan qotirmang

Ba'zi saytlarda shunday qator uchraydi:

html {
  font-size: 16px;
}

Zararsiz ko'rinadi, lekin u foydalanuvchi sozlamasini butunlay o'chiradi. Chrome'da tekshirdik: Large sozlamasida ham 1rem endi 16px, 1.25rem esa 20px. Butun sayt yana "qotib" qoldi.

Eski maqolalarda boshqa hiylani ham ko'rasiz: html { font-size: 62.5%; }. 16 ning 62.5 foizi — 10, shunda 1.4rem = 14px deb hisoblash oson bo'ladi. U sozlamani buzmaydi (foiz — nisbiy). Lekin endi rem bermagan har bir matn 10 pikselga tushib qoladi va hamma joyga shrift yozishga majbur bo'lasiz. Zamonaviy maslahat: html shriftiga umuman tegmang.

6.4 px dan rem ga o'tkazish

Hisob oddiy — pikselni 16 ga bo'ling:

Dizayner maketni pikselda beradi (Figma'da shunday). Siz CSS'ga rem da yozasiz: "18px" → 1.125rem.

Tekshirib ko'ring: Foydalanuvchi Chrome'da Very large ni tanladi. font-size: 1.5rem qancha piksel bo'ladi? font-size: 24px-chi?

7. ch — matn eni bilan o'lchash

1ch — shriftdagi "0" raqamining eni. Nomi inglizcha character (belgi) so'zidan. U matn bilan ishlaganda juda qulay: "shuncha belgi sig'sin" deb o'ylash mumkin.

Uzun qatorni o'qish qiyin — ko'z qator oxiridan keyingi qator boshini yo'qotib qo'yadi. Tipografiyada (matnni o'qishli qilib terish qoidalarida) qulay uzunlik taxminan 45–75 belgi deyiladi. max-width — elementning eng katta eni: undan kengaymaydi, lekin torroq bo'lishi mumkin (O'lchamlar darsida). Ikkisini birga ishlatamiz:

<style>
  p + p {
    max-width: 40ch;
  }
  input {
    width: 6ch;
  }
</style>
<p>Rustam aka oshni har kuni ertalab o'tin olovida, katta qozonda
damlaydi. Soat 7:00 dan birinchi lagan tayyor bo'ladi.</p>
<p>Rustam aka oshni har kuni ertalab o'tin olovida, katta qozonda
damlaydi. Soat 7:00 dan birinchi lagan tayyor bo'ladi.</p>
<p>
  <label for="odam">Necha kishi?</label>
  <input type="number" id="odam" name="odam" min="1" max="20">
</p>

Nimaga qarang: birinchi paragraf butun en bo'ylab cho'zilgan, ikkinchisi qisqa qatorlarga bo'lingan — uni o'qish osonroq. Ekran 40 belgidan ham tor bo'lsa, ikkalasi bir xil ko'rinadi: max-width faqat chegara, majburlamaydi. Odam soni maydoni esa ikki xonali son uchun yetarli, ortiqcha keng emas.

Ikki eslatma. 40ch — "0" raqamidan 40 tasi sig'adigan en. Oddiy shriftlarda harflar turli enli: "i" tor, "m" keng, ko'p harflar esa "0" dan torroq. Shuning uchun qatorga odatda 40 dan biroz ko'proq belgi sig'adi — Chrome'dagi skrinshotimizda 46–48 ta. Monospace shriftda (kod shriftida) esa aniq 40. Ikkinchisi: maydon ichidagi shrift sahifanikidan kichikroq, shuning uchun input dagi 6ch maydonning o'z shriftidan olinadi — em dagi kabi.

Tekshirib ko'ring: Paragrafga max-width: 40ch berdingiz. Sanab ko'rsangiz, qatorda 46 ta belgi bor. Xato bormi?

8. ex, cap, lh va rlh — shriftning boshqa o'lchovlari

Bu birliklar kamroq uchraydi, lekin ba'zi vazifalarni juda chiroyli yechadi. To'rttasini birdan yodlash shart emas: eng ko'p kerak bo'ladigani — lh. Qolganlari uchun kerak bo'lganda shu jadvalga qaytasiz.

ex — eng eskisi, u taxminan yarim em. Chrome'da o'lchadik: 16 piksellik shriftda shriftga qarab 7.2 dan 8.3 pikselgacha chiqdi. Amalda kam kerak bo'ladi, lekin eski kodda uchraydi. Qolgan uchtasini misolda ko'ramiz.

8.1 cap — ikonka bosh harf bo'yida

Taom nomi yonidagi kichik belgi bosh harf bilan bir bo'yda tursin desak:

<style>
  h3 svg {
    width: 1em;
    height: 1em;
    fill: #2f6b3a;
  }
  h3 + h3 svg {
    width: 1cap;
    height: 1cap;
  }
</style>
<h3>
  <svg viewBox="0 0 10 10" aria-hidden="true">
    <rect width="10" height="10"/>
  </svg>
  Osh — 1em
</h3>
<h3>
  <svg viewBox="0 0 10 10" aria-hidden="true">
    <rect width="10" height="10"/>
  </svg>
  Osh — 1cap
</h3>

Nimaga qarang: birinchi kvadrat "O" harfidan baland chiqib turibdi — 1em bosh harfdan kattaroq. Ikkinchisi harf bilan roppa-rosa bir bo'yda. aria-hidden="true" — bezak ikonkasini ekran o'quvchidan yashiradi (ARIA asoslari).

8.2 lh — bitta qator balandligi

1lh — elementning qator balandligi: bir qator matn qancha joy olsa, shuncha. Paragraflar orasiga "bir qator tashlab" yozmoqchimiz, xuddi daftardagi kabi:

<style>
  p {
    margin: 0;
  }
  p + p {
    margin-top: 1lh;
  }
</style>
<p>Osh — 35 000 so'm</p>
<p>Lag'mon — 28 000 so'm</p>
<p>Manti — 30 000 so'm</p>

Nimaga qarang: qatorlar orasidagi bo'shliq roppa-rosa bitta bo'sh qatorga teng. Qator balandligini o'zgartirsangiz (Qator balandligi darsida), bo'shliq ham o'zi moslashadi. rlh xuddi shunday, lekin html ning qatoridan olinadi — xuddi rem kabi qo'shilib ketmaydi.

8.3 Ular qaysi brauzerlarda ishlaydi?

ch, ex, em va rem o'n yillardan beri hamma joyda ishlaydi. lh, rlh va cap — yangiroq: Baseline ma'lumotlariga ko'ra, ular 2023-yil oxiridan beri to'rt asosiy brauzerning hammasida bor (Veb standartlari va brauzer mosligi). Uzoq vaqt yangilanmagan telefonda ular ishlamasligi mumkin.

Zaxira yo'li CSS nima darsidan tanish: brauzer tushunmagan qatorni tashlab ketadi. Avval eski birlik, keyin yangisi:

h3 svg {
  height: 0.7em; /* eski brauzer uchun taxminiy qiymat */
  height: 1cap;  /* tushungan brauzer shu qatorni oladi */
}

rcap, rch, rex kabi "r" li variantlar ham bor — ular faqat 2026-yil boshidan beri hamma brauzerda (Baseline'da yangi). Eski brauzerlarda ishlamaydi, hozircha ularga tayanmang.

9. Qaysi birlikni qachon?

Qat'iy qoida emas, lekin boshlash uchun yaxshi tayanch. Bitta tamoyilni eslab qoling: matn bilan bog'liq hamma narsa — nisbiy birlikda.

10. Ko'p uchraydigan xatolar

10.1 height: 50% ishlamayapti

Otaning bo'yi berilmagan — foiz e'tiborsiz qoladi. DevTools'dagi Computed yorlig'i height uchun kutilgan foizni emas, haqiqiy pikselni ko'rsatadi. Tuzatish: otaning bo'yini ayting yoki boshqa yo'l tanlang (O'lchamlar darsida).

10.2 Ichma-ich em kichrayib ketdi

Ro'yxat ichidagi ro'yxat, blok ichidagi blok — font-size: 0.8em har qavatda qayta ishlaydi. Tuzatish: shriftni rem da bering. em ni esa shu elementning o'z padding i va margin i uchun qoldiring.

10.3 html { font-size: 16px; }

Foydalanuvchi shrift sozlamasi o'chadi. Tuzatish: html ga shrift bermang. Juda kerak bo'lsa — foizda (100%).

10.4 Birliksiz son yoki bo'sh joy

width: 50; va padding: 1 rem; — ikkalasi ham jim tashlanadi (CSS nima). Tuzatish: 50% yoki 50px, 1rem — son va birlik yopishgan.

11. Mashqlar

1-mashq (oson): Pikseldan rem ga

Dizayner maketda shunday o'lchamlar berdi. rem ga o'tkazing (html shrifti 16px):

• Sarlavha: 40px →
• Narx: 20px →
• Rasm osti yozuvi: 13px →

Ishora: pikselni 16 ga bo'ling ("px dan rem ga o'tkazish" jadvali).

2-mashq (o'rta): Kim nechaga teng?

Ichki ul ota li ichida turibdi:

html {
  font-size: 100%;
}
li {
  font-size: 1.125em;
  padding-left: 1em;
}

Sozlama Medium (16px). Hisoblang:

1. Birinchi darajadagi li shrifti — necha piksel?
2. Ikkinchi darajadagi li shrifti?
3. Ikkinchi darajadagi li ning padding-left i?
4. Shu qoidani rem bilan yozsak, uchala javob qanday bo'ladi?

Ishora: font-size dagi em — otaning shriftidan, padding dagi em — elementning o'z shriftidan ("Qaysi shriftga?" bo'limi). padding-left — faqat chap tomondagi ichki bo'sh joy (CSS nima darsidagi to'liq yozuv).

3-mashq (qiyin): «Bahor» aksiya bloki

Stajyor shunday CSS yozdi va "shrift sozlamasida hech narsa o'zgarmayapti" deb shikoyat qildi:

html {
  font-size: 16px;
}
.aksiya {
  font-size: 20px;
  padding: 12px 24px;
  border: 2px solid #b4461a;
  max-width: 480px;
}

1. Nega Large sozlamasida blok o'zgarmaydi? Ikki sababni toping.
2. CSS'ni qayta yozing: shrift sozlamaga javob bersin, ichki bo'sh joy shrift bilan birga o'ssin, blok eni esa taxminan 45 belgi bo'lsin. Ramka ingichka chiziq bo'lib qolsin.

Ishora: "Qaysi birlikni qachon?" jadvaliga qarang. 12px va 24px — 20 piksellik shriftning qanday qismlari?

<style>
  .aksiya {
    font-size: 1.25rem;
    padding: 0.6em 1.2em;
    border: 2px solid #b4461a;
    max-width: 45ch;
  }
</style>
<p class="aksiya">Har juma kuni osh bilan ko'k choy — bepul.
Aksiya faqat choyxonaning o'zida amal qiladi.</p>

4-mashq: Portfolio qadami — px dan rem ga

Portfoliongizning asosiy.css ida piksellar bor: kirish paragrafi 18px, non yo'li 14px, kartalar va savol-javob bloklarining ichki bo'sh joyi 4px 16px va 4px 12px. O'tgan darsda savol-javob padding ini DevTools'da boshqa qiymatga o'zgartirgan bo'lsangiz, o'zingiznikini o'tkazing — namunada 4px 12px qoldi. Ularni nisbiy birliklarga o'tkazing:

1. Shrift o'lchamlari — rem da.
2. Ichki bo'sh joylar — em da: blok shrifti kattalashsa, bo'sh joy ham o'ssin.
3. main ichidagi paragraflar 65 belgidan uzun qator hosil qilmasin.
4. Chrome'da chrome://settings/appearance → Font size → Large ni tanlab, hamma sahifani ko'zdan kechiring. So'ng sozlamani qaytaring.

Ishora: 4px 16 piksellik shriftda — 0.25em, 16px — 1em. 3-band uchun max-width va ch ("ch — matn eni bilan o'lchash" bo'limi).

/* Sarlavhadan keyingi kirish matni */
h1 + p {
  font-size: 1.125rem;
}

/* Loyiha kartalari */
h1 ~ article {
  border: 1px solid #c9d6cf;
  padding: 0.25em 1em;
}

/* Non yo'li */
nav[aria-label="Non yo'li"] {
  font-size: 0.875rem;
}

/* Aloqa sahifasidagi savol-javob */
details[name="savollar"] {
  border: 1px solid #c9d6cf;
  padding: 0.25em 0.75em;
}

/* Uzun qatorlarni cheklash */
main p {
  max-width: 65ch;
}

<style>
  body {
    font-family: system-ui, sans-serif;
    color: #1f2a24;
    background-color: #f7faf8;
  }
  h1, h2 { color: #1f6f4a; }
  h1 + p { font-size: 1.125rem; }
  h1 ~ article {
    border: 1px solid #c9d6cf;
    padding: 0.25em 1em;
  }
  main p { max-width: 65ch; }
</style>
<main id="asosiy">
  <h1>Loyihalar</h1>
  <p>HTML qismida qilgan ishlarim. Har birida sahifalar tuzilmasi,
  formalar va accessibility tekshiruvi bor.</p>
  <article>
    <h2>Choyxona «Bahor» sayti</h2>
    <p>To'rt sahifali sayt: menyu, bron formasi va 404.</p>
  </article>
</main>

12. Real ishda

• Tailwind (tayyor class'lar to'plami, kursda alohida o'rganamiz) shriftlar va masofalarni rem da beradi: uning asosiy matn o'lchami — 1rem. Bootstrap ham rem ga o'tgan. Katta dizayn tizimlarida px ko'pincha faqat ramka va soyalarda qoladi.
• Figma maketlarni pikselda ko'rsatadi. Dasturchining kundalik ishi — "18px" ni 1.125rem ga aylantirish. VS Code'da buni avtomatik qiladigan kengaytmalar ham bor.
• Accessibility auditida "matnni 200% gacha kattalashtirish" talabi tekshiriladi (WCAG 1.4.4). rem bilan yozilgan sayt bu testdan oson o'tadi.
• Intervyuda klassik savol: "em va rem farqi nima? Qachon qaysi birini ishlatasiz?" Yaxshi javob: "rem — shriftlar uchun, qo'shilib ketmaydi. em — komponent ichidagi bo'sh joylar uchun, u shu komponent shrifti bilan birga o'sadi".

Xulosa

• CSS piksel — shartli birlik: DPR 3 li ekranda bitta CSS piksel 3×3 haqiqiy nuqta. cm, in, pt — faqat chop etish uchun.
• % xususiyatga qarab turli narsadan olinadi; padding va margin da — doim ota enidan, height da — faqat ota bo'yi aniq bo'lsa.
• em — font-size da otaning, qolgan joyda o'z shriftiga nisbatan; ichma-ich elementlarda qo'shilib ketadi.
• rem — html shriftiga nisbatan, foydalanuvchi shrift sozlamasiga javob beradi. html ga px da shrift bermang.
• ch — matn bloki eni uchun, cap va lh — ikonka va qator bilan bog'liq o'lchamlar uchun.

Keyingi dars: Viewport birliklari va mobil "100vh" muammosi — o'lchamni brauzer oynasiga bog'laymiz: vw, vh va telefon manzil paneli sabab paydo bo'lgan svh, lvh, dvh.

Manbalar

• MDN: "CSS values and units", "length", "percentage" — developer.mozilla.org
• W3C: "CSS Values and Units Module Level 4" — w3.org/TR/css-values-4
• web.dev: "Learn CSS — Sizing units" — web.dev/learn/css/sizing
• web-features (Baseline ma'lumotlari): lh, rlh, cap, rch — github.com/web-platform-dx/web-features