CSS da kenglik va balandlik

📌CSS o'lchov hususiyatlari
CSS o'lchov hususiyatlari sizga elementning baladligi va kenglingini nazorat qilishga ruhsat beradi. Bu elementni 100%li kengligi bor.

📌height(balandlik) va width(kenglik)ni o'rnatish
height va width xususiyatlari elementning balanfligi va kengligini o'rnatishda ishlatiladi.
height va width avto holatga o'rnatilishi mumkin(bu avtomatik ravishda. Anglatadiki, balandlik va kenglikni brauzer hisoblaydi), yoki uzunlik qiymatlarida belgilanadi px, cm, va boshqalar kabi yoki blokning foizida(%). Bu <div> elementini 100 piksel balandligi va 500 piksel kengligi bor.

Eslatma:
📍height va width hususiyatlari padding, chegara, va marginlarni o'z ichiga olmaydi; ular elementning padding, chegara, va marginining ichiga sohaning balangligi/kengligini o'rnatadi.
Quyidagi misol <div> elementini 100 piksel balandligi va 500 piksel kengligi bilan korsatadi:
Namuna:

div {
   width: 500px;
   height: 100px;
   border: 3px solid #73AD21;
}

📌Maksimum-kenglik o'rnatish

max-width hususiyati elementning maksimum kengligini o'rnatishda ishlatiladi.
max-width uzunlik qiymatlarida ishlatilishi mumkin px, cm, va boshqalar kabi yoki blokning foizida(%) yoki yo'qga o'rnatiladi(bu avtomatik holda. Anglatadiki, bu yerda maksimum kenglik yo'q).
Yuqoridagi <div> bilan brauzer oynasi elemetning kengligidan(500px) dan kichik bo'lganda muammo kelib chiqadi. Brauzer keyin sahifaga srollbar(bir taraf bilan keyingisi ko'rsatuvchi tugma) qo'shadi.
O’rniga maksimum kenglik o'rnatish bu holatda brauzerning kichik oynalarni tutib turishini o'zgartiradi.

📌Maslahat:
Ikki div o'rtasidagi farqni ko'rish uchun, brauzer oynasi kengligini 500px dan kamroq qilib ko'ring.
📌Eslatma:
max-width xususiyatining qiymati width qabul qilmaydi.
Bu <div> elementi 100 piksel balandligi va 500 piksel maksimum kengligi bor.
Quyidagi misol <div> elementini 100 piksel balandligi va 500 piksel maksimum-qiymati bilan ko'rsatadi:

📌Namuna:

div {
   max-width: 500px;
   height: 100px;
   border: 3px solid #73AD21;
}