CSS o'lcham

Bo'y

Shunday yozamiz.

<div style="background-color: red">
    Bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt
    besh olti yetti sakkiz. Ikki uch toʻrt besh olti yetti sakkiz toʻqqiz oʻn
    bir ikki uch toʻrt besh olti yetti sakkiz. Bir.
</div>

Brauzerda ko'ramiz.

Bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti yetti sakkiz. Ikki uch toʻrt besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti yetti sakkiz. Bir.

Qizil to'trburchak divimizdir.

Matnni ko'paytiramiz.

<div style="background-color: red">
    Bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt
    besh olti yetti sakkiz. Bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz
    oʻn bir ikki uch toʻrt besh olti yetti sakkiz. Bir ikki uch toʻrt besh
    olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti yetti sakkiz.
    Bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt
    besh olti yetti sakkiz. Bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz
    oʻn bir ikki uch toʻrt besh olti yetti sakkiz. Besh olti yetti sakkiz
    toʻqqiz oʻn bir ikki uch toʻrt besh olti yetti sakkiz. Bir ikki uch toʻrt
    besh olti yetti sakkiz toʻqqiz oʻn bir ikki
</div>

Brauzerda ko'ramiz.

Bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti yetti sakkiz. Bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti yetti sakkiz. Bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti yetti sakkiz. Bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti yetti sakkiz. Bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti yetti sakkiz. Besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti yetti sakkiz. Bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz oʻn bir ikki

divimiz o'sdi. Demak ko'p matn unsurni ichiga qo'ysak u kattayarkanda. Yuqoridagi div ga ko'proq matn qo'ysak bo'yi o'sdi.

div bu g'o'la unsur. Balki barcha g'o'la unsurlar shunday ishlar. Ammo qator unsurlar qanday ishlashadi? Misol uchun span.

Shunday yozamiz.

<span style="background-color: red">
    Bir ikki uch toʻrt.
</span>

Brauzerda ko'ramiz.

Bir ikki uch toʻrt.

Sal matnni ko'paytiramiz.

<span style="background-color: red">
    Bir ikki uch toʻrt besh olti yetti sakkiz.
</span>

Brauzerda ko'ramiz.

Bir ikki uch toʻrt besh olti yetti sakkiz.

span osdi, aniqrog'i eni o'sdi.

Yana matnni ko'paytiramiz.

<span style="background-color: red">
    Bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt
    besh olti yetti sakkiz. Bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz
    oʻn bir ikki uch toʻrt besh olti yetti sakkiz. Bir ikki uch toʻrt besh
    olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti yetti sakkiz.
    Bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt
    besh olti yetti sakkiz. Bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz
    oʻn bir ikki uch toʻrt besh olti yetti sakkiz. Besh olti yetti sakkiz
    toʻqqiz oʻn bir ikki uch toʻrt besh olti yetti sakkiz. Bir ikki uch toʻrt
    besh olti yetti sakkiz toʻqqiz oʻn bir ikki.
</span>

Brauzerda ko'ramiz.

Bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti yetti sakkiz. Bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti yetti sakkiz. Bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti yetti sakkiz. Bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti yetti sakkiz. Bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti yetti sakkiz. Besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti yetti sakkiz. Bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz oʻn bir ikki.

span o'sib ketdi.

Demak xulosa chiqarsa bo'ladiki, unsurning tarkibi o'ssa, unsur ham cho'ziladi. Puffakka ko'p xavoni ishirsangiz puffak cho'ziladiku, xuddi shunday unsurlar ham ishlaydi. Bitta puffak katta bo'ladi, chunki ichida havo ko'p, bitta puffak kichik bo'ladi, chunki ichida havo kam.

O'lchamlarni belgilash

Unsurning ichida tarkibi yetarli bo'lmasa, lekin baribir katta bo'lishini xohlasangiz - height va weight dan foydalaning.

Bo'y

Bo'y height bilan belgilanadi.

Shunday yozamiz.

<div style="height: 300px; background-color: red"></div>

Brauzerda ko'ramiz.

div bo'shligiga qaramasdan, balandligi 300px, chunki height: 300px deb belgiladik.

Shunday yozamiz.

<div style="height: 100px; background-color: red"></div>

Brauzerda ko'ramiz.

Yuqorida bo'yini 100px qildik.

Bu usulda bitta kamchilik bor. Misolda ko'raylik.

<div style="height: 100px; background-color: red">
    Bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt
    besh olti yetti sakkiz. Bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz
    oʻn bir ikki uch toʻrt besh olti yetti sakkiz. Bir ikki uch toʻrt besh
    olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti yetti sakkiz.
    Bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt
    besh olti yetti sakkiz. Bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz
    oʻn bir ikki uch toʻrt besh olti yetti sakkiz. Besh olti yetti sakkiz
    toʻqqiz oʻn bir ikki uch toʻrt besh olti yetti sakkiz. Bir ikki uch toʻrt
    toʻqqiz oʻn bir ikki uch toʻrt besh olti yetti sakkiz. Bir ikki uch toʻrt
    toʻqqiz oʻn bir ikki uch toʻrt besh olti yetti sakkiz. Bir ikki uch toʻrt
    toʻqqiz oʻn bir ikki uch toʻrt besh olti yetti sakkiz. Bir ikki uch toʻrt.
</div>

Brauzerda ko'ramiz.

Bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti yetti sakkiz. Bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti yetti sakkiz. Bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti yetti sakkiz. Bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti yetti sakkiz. Bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti yetti sakkiz. Besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti yetti sakkiz. Bir ikki uch toʻrt toʻqqiz oʻn bir ikki uch toʻrt besh olti yetti sakkiz. Bir ikki uch toʻrt toʻqqiz oʻn bir ikki uch toʻrt besh olti yetti sakkiz. Bir ikki uch toʻrt toʻqqiz oʻn bir ikki uch toʻrt besh olti yetti sakkiz. Bir ikki uch toʻrt.

Nimani ko'ryapmiz? Qizil to'rtburchakning bo'yi 100px, ammo bu ichidagi tarkibi uchun yetarli emas. Ichidagi matnning balandligi 100px dan kattaroq. Shu deb ichidagi matn toshib chiqyapti. Arig'da suv juda kopayib ketsa, suv ichidan toshib chiqadi, xuddi shunday narsani yuqoridagi divda ko'rdik.

Mazkur muammoning ikkita yechimi bor.

  1. div ning matnini kamaytirish.
  2. height: 100px xususiyatini olib tashlash. Shunda div o'zi kerakli darajagacha cho'ziladi va ichidagi tarkibni qamrab oladi.

Qator unsurlarning muammosi

Yuqoridagi misol g'o'la unsurlarga oid edi. Qator unsurlarni tekshirib qo'yaylik.

<span style="height: 100px; background-color: red"></span>

Brauzerda ko'ramiz.

Hech narsa yo'q.

Balki bo'yni ko'paytirishimiz kerakdir?

<span style="height: 400px; background-color: red"></span>

Brauzerda ko'ramiz.

Baribir ishlamayapti. Demak height qator unsurlar bilan ishlamas ekanda. Ammo qator-g'o'la unsurlari ham mavjud, ular bilan boshqa darsda tanisharmiz. Ular xuddi qator unsurlar kabi, lekin qator unsurlarning ayrim kamchiliklarisiz.

En

Shunday yozamiz.

<div style="background-color: red">
    Bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt
    besh olti yetti sakkiz. Ikki uch toʻrt besh olti yetti sakkiz toʻqqiz oʻn
    bir ikki uch toʻrt besh olti yetti sakkiz. Bir.
</div>

Brauzerda ko'ramiz.

Bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti yetti sakkiz. Ikki uch toʻrt besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti yetti sakkiz. Bir.

Endi shunday yozamiz.

<div style="width: 100px; background-color: red">
    Bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt
    besh olti yetti sakkiz. Ikki uch toʻrt besh olti yetti sakkiz toʻqqiz oʻn
    bir ikki uch toʻrt besh olti yetti sakkiz. Bir.
</div>

Brauzerda ko'ramiz.

Bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti yetti sakkiz. Ikki uch toʻrt besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti yetti sakkiz. Bir.

Birdaniga divning eni 100px bo'lib qoldi. Demak width xususiyati enni belgilar ekanda.

Endi shunday yozamiz.

<div style="width: 1000px; background-color: red">
    Bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt
    besh olti yetti sakkiz. Ikki uch toʻrt besh olti yetti sakkiz toʻqqiz oʻn
    bir ikki uch toʻrt besh olti yetti sakkiz. Bir.
</div>

Brauzerda ko'ramiz.

Bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti yetti sakkiz. Ikki uch toʻrt besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti yetti sakkiz. Bir.

Nimani ko'ryapmiz? div ning enini 1000px deb belgilaganimiz sababidan u juda cho'zilib ketdi.

Qator unsurlarining eni

Shunday yozamiz.

<span style="width: 300px; background-color: red">
    Bir ikki.
</span>

Brauzerda ko'ramiz.

Bir ikki.

Ko'ryatganimizday, width qator unsurlari bilan ishlamaydi.

Xatolar

Tarkibsiz

Shunday misol ko'raylik.

<div style="width: 200px; background-color: red">
</div>

Brauzerda ko'ramiz.

Nimaga hech narsa ko'rinmayapti? Chunki div bo'm-bo'sh. Unsurning ichi bo'm-bo'sh bo'sa, bo'yi ham 0 bo'ladi.

Yechim - yoki tarkibni qo'shish, yoki bo'yni (height) belgilash.

Quyidani tarkib qo'shish yechimi.

<div style="width: 200px; background-color: red">
    Tinchlik.
</div>

Brauzerda ko'ramiz.

Tinchlik.

Quyida bo'yni belgilash yechimi.

<div style="width: 200px; height: 100px; background-color: red">
</div>

Brauzerda ko'ramiz.