CSS o'lchamlari: width, height, min/max va ichki o'lcham kalit so'zlari

Qisqacha: Qat'iy width va height o'rniga chegara yozing: max-width — "ko'pi bilan", min-height — "kamida". Blok element width siz ham otasining enini oladi va width: 100% dan farqli, margin bilan ham sig'adi. fit-content kabi kalit so'zlar o'lchamni mazmundan oladi, aspect-ratio en va bo'y nisbatini ushlaydi. Barmoq bilan bosiladigan element kamida 24×24 CSS piksel bo'lsin (WCAG 2.2, AA), yaxshisi — 44×44.

Bu darsda

• width: auto va width: 100% farqini bilasiz va qachon width umuman kerak emasligini aytasiz.
• max-width, min-width, min-height bilan moslashuvchan o'lcham berasiz va ular to'qnashganda kim yutishini bilasiz.
• height: 100% nega ishlamasligini tushuntirasiz va to'g'ri yo'lni tanlaysiz.
• min-content, max-content, fit-content va aspect-ratio ni ishlatasiz.
• Bosiladigan joyning eng kichik o'lchamini (WCAG 2.5.8 va 2.5.5) bilasiz va DevTools'da o'lchaysiz.

Oldin bilishingiz kerak: box-sizing, display, O'lcham birliklari, Viewport birliklari, Matematik funksiyalar.

1. Nega bu kerak?

Stajyor «Bahor» menyusidagi kartaga aniq o'lcham berdi: width: 400px; height: 200px. Kompyuterda chiroyli. Keyin ikki narsa bo'ldi. Malika saytni 360 piksellik telefonda ochdi — karta ekrandan chiqib ketdi va sahifa chapga-o'ngga surila boshladi. Jasur aka esa taom tavsifini uzaytirdi — matn 200 piksellik qutidan pastga toshib chiqdi va keyingi karta ustiga tushdi.

Ikkala muammoning ildizi bitta: qat'iy o'lcham. Veb-sahifa qog'oz emas: ekran eni har xil, matn miqdori o'zgaradi, foydalanuvchi shriftni kattalashtiradi (O'lcham birliklari).

Choyxonadagi dasturxonni tasavvur qiling. "Aynan olti kishilik" dasturxon bor. Yettinchi mehmon kelsa — joy yo'q. Uch kishi kelsa — dasturxonning yarmi bo'sh. Yaxshi dasturxon — "kamida olti kishilik, kerak bo'lsa uzayadi". CSS'da ham shunday: aniq son o'rniga chegara yozamiz — "kamida shuncha", "ko'pi bilan shuncha". Qolganini brauzer mazmunga va ekranga qarab hal qiladi.

2. width: yozish kerakmi?

2.1 width: auto — blokning aqlli boshlang'ich qiymati

Blok elementga width yozmasangiz, uning qiymati auto. Bu "bo'sh" degani emas. auto bilan blok otasining enini o'zi to'ldiradi: o'z margin'larini ayirib, padding va border'ni ichkariga joylab.

Buni Box model darsining portfolio qadamida ko'rgan edingiz: width berilmagan karta 312 piksellik ustunni to'liq egalladi, qatlamlar esa uning ichiga sig'di. Bu box-sizing ga ham bog'liq emas — auto ikkala rejimda ham to'g'ri hisoblaydi.

2.2 width: 100% — ota enining 100 foizi, ustiga margin

100% esa boshqa narsa: "otaning mazmun enining 100 foizi". Unga margin qo'shilsa, element otadan chiqib ketadi:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-urgu: #b4461a;
  }
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  section {
    width: 18rem;
    border: 2px dashed var(--rang-asosiy);
  }
  .aksiya {
    margin-inline: 1rem;
    padding: 0.25em 0.5em;
    background-color: var(--rang-urgu);
    color: #fffaf0;
  }
  .aksiya + .aksiya {
    width: 100%;
  }
</style>
<section>
  <p class="aksiya">✅ width: auto</p>
  <p class="aksiya">❌ width: 100%</p>
</section>

Nimaga qarang: birinchi lenta ramka ichida, ikki chetdan 1rem uzoqda. Ikkinchisi o'ng tomondan ramkadan chiqib ketgan. Chrome'da o'lchadik: section ning ichki eni 284 piksel. Birinchi lenta — 252 (284 − 16 − 16), ikkinchisi — 284, ustiga chapdan 16 piksel margin. border-box ham yordam bermadi: u padding va border'ni ichkariga oladi, margin'ni emas.

Qoida: blokka en kerak bo'lmasa — width yozmang. auto deyarli har doim to'g'ri ishlaydi. width: 100% faqat o'zi otasini to'ldirmaydigan elementlarda kerak: input, button, inline-block — box-sizing darsidagi forma maydonlari kabi.

2.3 Qat'iy width qachon joiz

Aniq piksel yoki rem — faqat kichik, mazmuni o'zgarmaydigan narsalarda: ikonka, avatar, belgi. Kattaroq blok uchun — keyingi bo'limdagi chegaralar. Satr ichidagi elementga esa width umuman ishlamaydi — avval display ni o'zgartiring.

Tekshirib ko'ring: main ichidagi section ga width: 100%; margin: 0 1rem; berildi. Telefonda gorizontal skroll paydo bo'ldi. Eng qisqa tuzatish qanday?

3. Chegaralar: min- va max-

3.1 max-width — "ko'pi bilan"

max-width — elementning eng katta eni. U elementni kengaytirmaydi, faqat to'xtatadi: ota tor bo'lsa, element ham tor. Eslang: O'lcham birliklari darsida matn qatorini max-width: 65ch bilan cheklagan edingiz. Keyin Matematik funksiyalar darsida width: min(100%, 24rem) va width: 100%; max-width: 24rem bir xil natija berishini ko'rgan edik.

Eng ko'p uchraydigan naqsh — sahifaning markaziy ustuni:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-fon: #fffaf0;
  }
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  body {
    background-color: #e8e2d6;
  }
  main {
    max-width: 30rem;
    margin-inline: auto;
    padding: 0.5rem 1rem;
    background-color: var(--rang-fon);
  }
  h1 {
    color: var(--rang-asosiy);
  }
</style>
<main>
  <h1>Menyu</h1>
  <p>Osh — 35 000 so'm. Rustam aka uni har kuni ertalab
  o'tin olovida damlaydi.</p>
</main>

Tepadagi tugmalar bilan ekran enini almashtiring. Nimaga qarang: telefonda (360) qaymoq ustun butun enni oladi — faqat body ning 8 piksellik margin'i qoladi. Kompyuterda (1280) u 30rem da — 480 pikselda — to'xtaydi va Margin sirlari dagi margin-inline: auto bilan o'rtaga tushadi.

max-width ning mashhur ishlatilishi — rasm: img { max-width: 100%; } rasmni otasidan kengaymaydigan qiladi. Rasm qo'yish darsida "kichraytirish — CSS ishi" degan edik. Lekin rasmda bitta tuzoq bor — bo'yi ham moslashishi kerak. Uni Rasm va media darsida to'liq ko'ramiz.

3.2 min-width — "kamida"

min-width — eng kichik en. Masalan, tugma yozuvi "OK" kabi qisqa bo'lsa, tugma juda torayib ketmasin: min-width: 6rem.

3.3 Kim yutadi?

Uchalasi to'qnashsa, qoida qat'iy:

• max-width width dan kuchli: width: 600px; max-width: 400px — 400.
• min-width ikkalasidan ham kuchli: max-width: 400px; min-width: 500px — 500.

Chrome'da tekshirdik — xuddi shunday. Eslab qolish oson: "kamida" — eng oxirgi so'z. Element hech qachon min-width dan tor bo'lmaydi.

Uchalasi ham box-sizing ga bo'ysunadi. Reset'dan keyin max-width: 30rem — border bilan birgalikdagi 30rem (box-sizing).

3.4 min-height — balandlikni bermang

Bo'yda qoida yanada qat'iy: matnli blokka height bermang. Mana nega:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
  }
  .taom-karta {
    width: 14rem;
    padding: 0 1em;
    margin-bottom: 1rem;
    border: 2px solid var(--rang-asosiy);
    height: 5rem;
  }
  .taom-karta + .taom-karta {
    height: auto;
    min-height: 5rem;
  }
</style>
<article class="taom-karta">
  <h3 class="taom-nomi">❌ height</h3>
  <p>Qo'lda cho'zilgan xamir, mol go'shti, bulg'or qalampiri
  va sarimsoq bilan.</p>
</article>
<article class="taom-karta">
  <h3 class="taom-nomi">✅ min-height</h3>
  <p>Qo'lda cho'zilgan xamir, mol go'shti, bulg'or qalampiri
  va sarimsoq bilan.</p>
</article>

Nimaga qarang: birinchi kartada matn yashil ramkadan pastga toshib chiqib, ikkinchi karta ustiga tushdi. Ikkinchi karta esa mazmuniga qarab cho'zildi — min-height "kamida 5rem, kerak bo'lsa ko'proq" degani. Kam matnli kartalar ham 5rem dan kichraymaydi — hamma kartalar bir xil ko'rinadi.

Viewport birliklari darsida height: 100svh o'rniga min-height: 100svh yozgan edik — sabab xuddi shu. Kichik telefonda, katta shriftda matn bir ekranga sig'masligi mumkin.

max-height ham bor — eng katta bo'y. U ko'pincha skroll qilinadigan qutilarda kerak: "250 pikseldan oshsa, ichida aylantirilsin". Toshib chiqqan mazmun bilan nima qilishni Overflow darsida o'rganamiz.

Tekshirib ko'ring: .taom-karta { width: 500px; max-width: 100%; } Telefonda (ota eni 320 piksel) karta eni qancha bo'ladi? Kompyuterda (ota 800)?

4. height: 100% nega ishlamaydi

O'lcham birliklari darsida height: 50% otaning bo'yi aytilmasa, e'tiborsiz qolishini ko'rgan edik. Sabab — aylana: ota bo'yini bolalariga qarab hisoblaydi, bola esa otaning foizini so'raydi. "Bu tuzoqni O'lchamlar darsida to'liq yechamiz" degan edik.

flowchart LR
  O["Ota: bo'yim<br/>bolalarimga qarab"] -->|"bolaning bo'yi<br/>qancha?"| B["Bola:<br/>height: 100%"]
  B -->|"otaning bo'yi<br/>qancha?"| O

Nimaga qarang: ikkalasi bir-birini kutadi. Brauzer bu aylanani uzadi — foizni e'tiborsiz qoldiradi va bolaga mazmunicha bo'y beradi.

Eng ko'p uchraydigan holat — otaga min-height berish:

section {
  min-height: 200px;
}
section > div {
  height: 100%; /* ishlamaydi */
}

Ko'pchilik bola 200 piksel bo'ladi deb kutadi. Chrome'da tekshirdik: section 200 piksel, ichidagi div esa atigi 18 — bir qator matn. min-height otaning bo'yini aniq qilmaydi: u "kamida 200, balki ko'proq" deydi. Foiz esa aniq songa muhtoj. Otaga height: 200px bersak, bola ham 200 bo'ldi.

Uch to'g'ri yo'l:

1. Otaga aniq bo'y — lekin matnli blokka height bermaslik kerakligini yuqorida ko'rdik: bu kamdan-kam to'g'ri.
2. Elementning o'ziga min-height. Masalan, butun ekranli blok uchun zanjirni html dan boshlab height: 100% qilish o'rniga — blokning o'ziga min-height: 100svh (Viewport birliklari). Eski saytlarda html, body { height: 100%; } zanjirini uchratasiz — endi buning keragi yo'q.
3. Flex yoki grid. Ularda bolalar otaning bo'yiga o'z-o'zidan cho'ziladi — foizsiz. Buni Flexbox'ga kirish va Grid'ga kirish darslarida ko'rasiz. Ikki ustunli kartalarni bir xil bo'yli qilish aynan shunday qilinadi.

5. Ichki o'lcham: mazmundan kelgan o'lcham

5.1 Uch kalit so'z

Hozirgacha o'lcham tashqaridan kelardi: otadan (auto, %) yoki siz yozgan sondan. Lekin element o'z mazmunidan ham o'lcham "bilishi" mumkin. Bu ichki o'lcham (intrinsic size) deyiladi. CSS'da unga uchta kalit so'z bor:

• min-content — mazmun sig'adigan eng tor en. Matn har bir imkoniyatda qatorga bo'linadi, en — eng uzun so'z enicha.
• max-content — mazmun hech bo'linmasdan bitta qatorda turgandagi en. Ota tor bo'lsa, element undan chiqib ketadi.
• fit-content — mazmunga moslashadi, lekin otadan kengaymaydi. Qisqa matnda max-content kabi, uzun matnda ota enicha.

<style>
  :root {
    --rang-asosiy: #2f6b3a;
  }
  section {
    width: 20rem;
    outline: 2px dashed var(--rang-asosiy);
  }
  p {
    margin: 0 0 4px;
    background-color: #d8ecd9;
  }
  p:nth-child(1) {
    width: min-content;
  }
  p:nth-child(2) {
    width: max-content;
  }
  p:nth-child(3),
  p:nth-child(4) {
    width: fit-content;
  }
</style>
<section>
  <p>min-content: osh bilan ko'k choy</p>
  <p>max-content: Rustam aka bugun katta qozonda osh damladi</p>
  <p>fit-content: Aksiya −10%</p>
  <p>fit-content: Rustam aka bugun katta qozonda osh damladi</p>
</section>

Nimaga qarang: yashil fonlar mazmunga "yopishib" turibdi. Birinchisi eng uzun so'z enicha torayib, har so'z alohida qatorga tushdi. Ikkinchisi bitta qatorda qoldi va punktir ramkadan o'ngga chiqib ketdi. Uchinchisi qisqa — yozuvi enicha. To'rtinchisi uzun, lekin ramkadan chiqmadi: fit-content uni ota enida to'xtatdi va matn qatorlarga bo'lindi.

5.2 fit-content amalda

Eng foydalisi — fit-content. U "blok, lekin mazmunicha" degan narsani beradi. Oddiy blok butun enni oladi — foni ham butun en bo'ylab cho'ziladi. Sarlavha ostidagi chiziq, fonli yorliq, "Aksiya" belgisi esa yozuv enicha bo'lishi kerak:

.aksiya {
  width: fit-content;
  margin-inline: auto;
}

Bu ikki qator blokni yozuv enicha qiladi va o'rtaga qo'yadi. Qiymat inline-block ham mazmunicha kenglik beradi, lekin u matn qatorida turadi va markazlash uchun otasiga qo'shimcha qoida kerak bo'ladi. fit-content bilan element blokligicha qoladi.

Baseline ma'lumotlariga ko'ra, min-content va max-content 2020-yildan, fit-content esa 2021-yildan beri hamma asosiy brauzerda ishlaydi — ikkalasi ham "keng tarqalgan". Yana bitta yangi kalit so'z bor — stretch ("ota enini margin'larni hisobga olib to'ldir"). U hali Baseline emas: Baseline ma'lumotiga ko'ra Firefox'da yo'q. Blokda buning o'rnini width: auto bajaradi.

Tekshirib ko'ring: Menyu sahifasidagi "Bugungi taom" yorlig'i — fonli p. U butun en bo'ylab cho'zilgan, yozuv esa kichik. Uni yozuv enicha qilishning ikki yo'lini ayting.

6. aspect-ratio — en va bo'y nisbati

O'lcham birliklari darsida "eski saytlarda padding foizi bilan 16:9 quti yasashgan, bugun buning uchun alohida xususiyat bor" degan edik. Mana u — aspect-ratio: en va bo'y orasidagi nisbatni ushlaydi. Siz enini (yoki uning yo'qligini) berasiz, bo'yni brauzer nisbatdan hisoblaydi:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-urgu: #b4461a;
  }
  div {
    max-width: 20rem;
    aspect-ratio: 16 / 9;
    background: linear-gradient(
      135deg, var(--rang-asosiy), var(--rang-urgu)
    );
  }
  p {
    width: 6rem;
    aspect-ratio: 1;
    margin-top: 1rem;
    border: 2px solid var(--rang-asosiy);
  }
</style>
<div></div>
<p>Kvadrat bo'lishi kerak edi, lekin ichidagi matn unga
sig'madi va quti pastga cho'zildi</p>

Nimaga qarang: rangli quti — «Bahor» haqidagi video uchun joy. Uning eni 320 piksel, bo'yi 180 — 16:9. Ekran torayib, quti ingichkalashsa, bo'yi ham birga kichrayadi. linear-gradient — rangdan rangga o'tuvchi fon, uni Gradientlar darsida ko'rasiz. Pastdagi ramka aspect-ratio: 1 bilan kvadrat bo'lishi kerak edi — lekin matn sig'madi va u pastga cho'zildi. Chrome'da o'lchadik: eni 6rem, ya'ni 96 piksel, mazmun bo'yi esa 96 dan ko'p.

Uch qoida:

• Nisbat — "tavsiya". Mazmun sig'masa, brauzer uni kesmaydi, bo'yni kattalashtiradi. Bu yaxshi: matn yo'qolmaydi.
• width va height ikkalasi berilsa, aspect-ratio e'tiborsiz qoladi — Chrome'da tekshirdik. Ikki o'lcham allaqachon nisbatni belgilab qo'ygan.
• Rasmda u o'zi bor. img dagi width va height atributlari (Rasm qo'yish) brauzerga nisbatni aytadi — rasm yuklanmasdan oldin joy ajratiladi. Buning CSS tomonini Rasm va media darsida ko'ramiz.

aspect-ratio Baseline ma'lumotlariga ko'ra 2021-yildan beri hamma asosiy brauzerda ishlaydi va "keng tarqalgan" holatida.

7. Barmoq uchun o'lcham

7.1 Muammo

Lighthouse bilan audit darsida «Bahor»da ikki ogohlantirish qolgan edi. Ulardan biri: "Touch targets do not have sufficient size or spacing" — "bosiladigan joylar juda kichik yoki bir-biriga juda yaqin". Keyin Yakuniy loyiha darsida portfolio'ning Accessibility bahosi shu sabab 95 da qoldi. Ikkala joyda ham "bu CSS ishi" degan edik. Endi uning asosini qo'yamiz.

Oddiy havola — satr ichidagi element, uning bo'yi matn qatoricha: 16 piksellik shriftda taxminan 17–21 piksel, shriftga qarab. Barmoq uchi esa ancha katta. Kichik va bir-biriga zich havolalarda barmoq ko'pincha qo'shnisiga tegadi. Titroq qo'lli keksa odam yoki avtobusda ketayotgan yo'lovchi uchun bu yanada qiyin.

7.2 WCAG raqamlari

WCAG 2.2 da bu haqida ikki mezon bor. Ularni w3.org dan tekshirib yozdik:

AA — saytlardan odatda talab qilinadigan daraja, AAA — eng yuqorisi (Accessibility). Lighthouse'dagi "Touch targets" tekshiruvi 2.5.8 mezoniga tayanadi.

2.5.8 ning muhim istisnolari bor:

• Oraliq (spacing). Element 24 dan kichik bo'lishi mumkin, agar uning markaziga chizilgan 24 piksellik doira qo'shni bosiladigan elementga tegmasa.
• Matn ichida (inline). Gap ichidagi havola bu talabdan ozod — uni kattalashtirsangiz, qatorlar buziladi.
• Brauzer o'zi chizgan va siz o'zgartirmagan element, muqobil yo'li bor element va o'lchami muhim bo'lgan element (masalan, xaritadagi nuqta).

Kursdagi qaror: talab — 24×24, maqsad — 44×44. Menyu, tugma va forma maydonlarini imkon bo'lsa 44 piksel qiling.

7.3 Qanday kattalashtiriladi

Shriftni emas, bosiladigan maydonni kattalashtiramiz. Bu yerda uchala oldingi dars birlashadi: padding bosiladi (Box model), satr ichidagi element vertikal padding'ni qatorga qo'shishi uchun inline-block kerak (display), min- chegaralar esa eng kichik o'lchamni kafolatlaydi:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-fon: #fffaf0;
  }
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  a {
    background-color: #d8ecd9;
    color: var(--rang-asosiy);
  }
  p + p a {
    display: inline-block;
    min-width: 44px;
    min-height: 44px;
    padding: 0.75rem 0.5rem;
  }
</style>
<p><a href="menyu/">Menyu</a> <a href="bron/">Bron</a>
<a href="aloqa/">Aloqa</a></p>
<p><a href="menyu/">Menyu</a> <a href="bron/">Bron</a>
<a href="aloqa/">Aloqa</a></p>

Nimaga qarang: och yashil fon — bosiladigan maydon. Tepada u yozuvga yopishgan, havolalar orasida esa faqat bitta bo'sh joy bor. Chrome'da o'lchadik: bo'yi 17 piksel — 24 ga ham yetmaydi. Pastdagi havolalar 44 piksel baland: min-height buni kafolatladi, shrift esa o'zgarmadi.

Eng qisqa "Bron" ham 48 piksel enda chiqdi — padding'ning o'zi yetdi. min-width esa "Ha" yoki "×" kabi bir-ikki belgili havolalarni himoya qiladi: ular ham 44 dan tor bo'lmaydi. Bu yerda box-sizing: border-box ham muhim: 44 — padding bilan birga.

7.4 DevTools'da o'lchash

Elementni tanlang va box model chizmasiga qarang. Yoki Elements panelida uning ustiga sichqonchani olib boring — sahifada o'lchami yozilgan kichik oyna chiqadi. Yuqoridagi "Menyu" havolasi uchun Chrome a 61.33 × 44 deb yozadi. Tekshiriladigan son — border bilan birgalikdagi o'lcham, margin'siz: bosish faqat shu maydonga tushadi.

Tekshirib ko'ring: Footer'da ikonka havolalari 20×20 piksel, orasida 30 piksel bo'sh joy bor. Ular 2.5.8 mezonidan o'tadimi?

8. Ko'p uchraydigan xatolar

8.1 Hamma narsaga width: 100%

Margin qo'shilganda element otadan chiqadi. Tuzatish: blokda width yozmang — auto o'zi to'ldiradi.

8.2 Matnli blokka height

Matn ko'paysa yoki shrift kattalashsa — toshib chiqadi. Tuzatish: min-height.

8.3 height: 100% va min-height li ota

Bola cho'zilmaydi — otaning bo'yi aniq emas. Tuzatish: bolaning o'ziga min-height, yoki flex/grid.

8.4 max-width siz keng ustun

Katta monitorda matn qatori 200 belgidan uzun bo'ladi. Tuzatish: max-width: 65ch yoki ustunga max-width va margin-inline: auto.

8.5 Kichik bosiladigan joyni shrift bilan "tuzatish"

font-size: 24px — menyu kattalashdi, lekin dizayn buzildi, maydon esa baribir yozuvga yopishgan. Tuzatish: padding, inline-block va min-height.

8.6 max-content bilan telefon skrolli

Uzun matn bitta qatorda qoladi va ekrandan chiqadi. Tuzatish: fit-content — u otadan kengaymaydi.

9. Mashqlar

Mashqlarni kurs/mashqlar/05/ papkasida bajaring.

1-mashq (oson): Kim yutadi?

Otaning mazmun eni 360 piksel. Har holatda elementning eni qancha?

1. width: 500px; max-width: 100%; —
2. width: 200px; min-width: 300px; —
3. max-width: 250px; min-width: 300px; —
4. Blok, width yo'q, margin-inline: 20px; —

Ishora: "Kim yutadi?" bo'limidagi ikki qoida va width: auto qanday to'ldirishi.

2-mashq (o'rta): Bron formasining o'lchamlari

«Bahor» bron formasiga qo'shimcha istaklar maydoni qo'shildi:

<form action="https://example.com/bron" method="post">
  <div>
    <label for="odam">Mehmonlar soni</label>
    <input id="odam" name="odam" type="number"
           min="1" max="20" value="2">
  </div>
  <div>
    <label for="istak">Qo'shimcha istaklar</label>
    <textarea id="istak" name="istak" rows="3"
              maxlength="200"></textarea>
  </div>
  <button type="submit">Stolni band qilish</button>
</form>

asosiy.css ga yozing:

1. Forma — ko'pi bilan 28rem, o'rtada.
2. Mehmonlar soni maydoni — ikki xonali son uchun yetarli, ortiqcha keng emas.
3. textarea — butun en, kamida 6rem baland, matn ko'paysa foydalanuvchi uni cho'za olsin.
4. Tugma — kamida 44 piksel baland, 44 piksel en.

Ishora: 2-band — O'lcham birliklari darsidagi ch. HTML qismida maydon enini size atributi bilan berish eskirgan degan edik (Matnli maydonlar) — endi CSS bilan. 3-band — height emas.

<style>
  :root {
    --rang-asosiy: #2f6b3a;
  }
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  form {
    max-width: 28rem;
    margin-inline: auto;
  }
  label {
    display: block;
  }
  input,
  textarea,
  button {
    font: inherit;
  }
  #odam {
    width: 6ch;
  }
  textarea {
    width: 100%;
    min-height: 6rem;
  }
  button {
    min-width: 44px;
    min-height: 44px;
    padding-inline: 1em;
    margin-top: 1rem;
  }
</style>
<form action="https://example.com/bron" method="post">
  <div>
    <label for="odam">Mehmonlar soni</label>
    <input id="odam" name="odam" type="number"
           min="1" max="20" value="2">
  </div>
  <div>
    <label for="istak">Qo'shimcha istaklar</label>
    <textarea id="istak" name="istak" rows="3"
              maxlength="200"></textarea>
  </div>
  <button type="submit">Stolni band qilish</button>
</form>

3-mashq (qiyin): Video kartasi

«Bahor»ning bosh sahifasida "Osh qanday damlanadi" videosi uchun karta kerak:

• karta — ko'pi bilan 24rem, o'rtada, 1rem padding bilan;
• ichida video joyi — kartaning butun eni, 16:9 nisbatda;
• joy ostida sarlavha va tavsif;
• karta yonidagi karta bilan bir qatorga qo'yilganda ham buzilmasligi uchun kartaga qat'iy height berilmasin.

Hozircha video o'rniga gradientli div qo'ying — Box model dagi kabi. Karta telefonda 360 piksel ekranga sig'sin. Hisoblang: 1280 piksellik ekranda video joyining eni va bo'yi qancha bo'ladi?

Ishora: video joyi — width siz blok (u kartani to'ldiradi) + aspect-ratio. Hisobda box-sizing: border-box va karta padding'ini unutmang.

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-urgu: #b4461a;
  }
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  .taom-karta {
    max-width: 24rem;
    margin-inline: auto;
    padding: 1rem;
    border: 2px solid var(--rang-asosiy);
  }
  .taom-karta div {
    aspect-ratio: 16 / 9;
    background: linear-gradient(
      135deg, var(--rang-asosiy), var(--rang-urgu)
    );
  }
</style>
<article class="taom-karta">
  <div></div>
  <h3 class="taom-nomi">Osh qanday damlanadi</h3>
  <p>Rustam aka qozon, sabzi va guruch haqida so'zlaydi.</p>
</article>

4-mashq: Portfolio qadami — forma o'lchamlari va bosish auditi

1. Aloqa formasidagi textarea kamida 8rem baland bo'lsin.
2. "Yuborish" tugmasi — kamida 44 piksel baland, chap va o'ngda 1.5em padding.
3. Bosish auditi: telefon rejimida (360 piksel) bosh sahifani oching. DevTools bilan asosiy menyu havolalarining bo'yini va qo'shni havolalar orasidagi masofani o'lchang. Ular 2.5.8 mezonidan o'tadimi? Natijani yozib qo'ying — tuzatishni flex darslaridan keyin qilamiz.
4. Bosh sahifadagi rasm telefonda ustundan chiqib turganini ko'ring. Hozircha faqat yozib qo'ying.

Ishora: 3-band — "WCAG raqamlari" bo'limidagi oraliq istisnosini eslang: qo'shni havolalar markazlari orasida kamida 24 piksel bo'lishi kerak.

/* Aloqa formasi: o'lchamlar */
textarea {
  min-height: 8rem;
}

button {
  min-height: 2.75rem;
  padding-inline: 1.5em;
}

10. Real ishda

• "Qat'iy o'lcham yo'q" — responsive dizaynning birinchi qoidasi. Tajribali dasturchi kodida width: 400px kamdan-kam, max-width, min-height va auto esa ko'p. Bu Intrinsic layout darsining asosi.
• Dizayn tizimlari tugma va forma maydonlariga 40–48 piksellik minimal bo'y beradi. Apple va Google ham o'z qo'llanmalarida 44 va 48 atrofidagi sonlarni tavsiya qiladi.
• Accessibility auditi — ko'p kompaniyalarda WCAG 2.2 AA talabi shartnomaga yoziladi. 24×24 — shu talabning bir qismi.
• Intervyuda so'raladi: "width: auto va width: 100% farqi?", "Nega height: 100% ishlamayapti?", "min-content va fit-content nima?", "16:9 blokni qanday yasaysiz?".

Xulosa

• Blokda width yozmang — auto margin'ni hisobga olib to'ldiradi; 100% + margin otadan chiqadi.
• Aniq son o'rniga chegara: max-width — ko'pi bilan, min-height — kamida. min-width hammadan kuchli.
• height: 100% faqat otaning bo'yi aniq bo'lsa ishlaydi; min-height li ota — aniq emas.
• min-content, max-content, fit-content — mazmundan kelgan o'lcham; eng foydalisi fit-content.
• aspect-ratio: 16 / 9 — bo'yni endan hisoblaydi; mazmun ko'p bo'lsa, quti cho'ziladi.
• Bosiladigan joy — kamida 24×24 (WCAG 2.5.8, AA), maqsad — 44×44 (2.5.5, AAA); padding, inline-block va min-height bilan.

Keyingi dars: Overflow — mazmun qutiga sig'maganda uni kesish, aylantirish yoki ... bilan qisqartirish.

Manbalar

• MDN: "width", "max-width", "min-height", "aspect-ratio", "min-content", "max-content", "fit-content" — developer.mozilla.org
• W3C: "CSS Box Sizing Module Level 3" — w3.org/TR/css-sizing-3
• W3C: "Understanding SC 2.5.8: Target Size (Minimum)" va "Understanding SC 2.5.5: Target Size (Enhanced)" — w3.org/WAI/WCAG22/Understanding
• web-features (Baseline ma'lumotlari): "aspect-ratio", "min-max-content", "fit-content", "stretch" — github.com/web-platform-dx/web-features