CSS quti o'lchovi

width xususiyati unsurning enini belgilaydi.
height xususiyati unsurning bo'yini belgilaydi.

Ammo unsurning eniga tiqma kiradimi? Chegarachi? Hoshiyachi? U ham kiradimi?

Aslida width unsurning enini emas, tarkibining enini belgilaydi. height esa tarkibining bo'yini belgilaydi.

Unsurning kulcha deb tasavvur qilsak, quyidigacha chiqadi. Kulchaning ichidagi murabbosi tarkibidir, xamiri tiqmasidir, cheti esa chegarasidir.

Tarkib qutisi
Tarkib qutisi

Misol.

<div style="width: 140px; border: 5px solid red; padding: 40px; margin: 25px;">
    Yoʻl bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti yetti sakkiz.
</div>
Yoʻl bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti yetti sakkiz.

width: 140px deb yozdik. Lekin mazkur unsurning eni 120 pikselmi? Yo'q. Bu unsurning faqatgina tarkibi 120 piksel. Butun unsurning eni esa bu tarkibi 140px + tiqmasi 40px o'ndan va 40px chapdan + chegarasi 5 piksel o'ndan va 5 piksel chapdan + hoshiyasi 25 piksel o'ndan va 25 piksel chapdan. Umuman 260 piksel.

Shunday gaplar. Demak butun unsurning enini hisoblash uchun tarkibini, tiqmasini, chegarasini va hoshiyasini qo'shish kerak ekan.

Chegara qutisi

Lekin butun unsurning enini hisoblashga erinadigan bo'lsangiz, ishingizni osonlashtiradigan usul bor. Bu usul - chegara qutisidan foydalanish.

Misolda ko'raylik.

<div style="box-sizing: border-box; width: 140px; border: 5px solid red; padding: 40px; margin: 25px;">    Yoʻl bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti yetti sakkiz.
</div>
Yoʻl bir ikki uch toʻrt besh olti yetti sakkiz toʻqqiz oʻn bir ikki uch toʻrt besh olti yetti sakkiz.

Xuddi oldingi misol, lekin bitta narsa qo'shildi. Bu narsa box-sizing: border-box dir. box-sizing: border-box nima qiladi? Quyidagi kulchaning rasmida tushunsa bo'ladi.

Chegara qutisi
Chegara qutisi

Endi width xususiyati tarkibning enini emas, balki tarkibning + tiqmaning + chegaraning enini belgilaydi. Xuddi shunday height xususiyati tarkibning bo'yini emas, balki tarkibning + tiqmaning + chegaraning bo'yini belgilaydi.

Yuqoridagi kod misolida width qiymatini 140 piksel deb belgiladik. Bu degani tarkibning eni 140 piksel emas, balki tarkibning + tiqmaning + chegaraning umumiy eni 140 piksel.

Savol paydo bo'la oladi. Tarkibning eni unda qancha bo'ladi?
Tarkibning enini bilib olish uchun orqamachasiga hisoblash kerak. Tarkibning eni = 140 piksel - tiqma (40 piksel o'nda va 40 piksel chapda) - chegara (5 piksel o'nda va 5 piksel chapda).
Bu degani 140 - 80 - 10 = 50 piksel. Demak tarkibning eni 50 piksel.

box-sizing qutining o'lchovi degani. border-box esa chegara qutisi degani.

Quti o'lchovining odatiy qiymati content-box (tarkib qutisi). Bu degani box-sizing yozmasangiz, uning qiymati content-box ga teng bo'ladi, va width height xususiyatlari aynan tarkibning enini va bo'yini belgilaydi.

box-sizing border-box ga teng bo'lsa, width va height xususiyatlari tarkibning, tiqmaning, chegaraning umumiy enini belgilaydi.

Tiqma qutisi

box-sizing padding-box ga teng bo'lsa, width va height xususiyatlari tarkibning, tiqmaning umumiy enini belgilaydi.
padding-box tiqma qutisi degani.

tiqma qutisi

Hoshiya qutisi

Afsuski, hoshiya qutisi mavjud emas.