CSS Width/Height

CSS ning width va height xususiyatlari elementning balandligi va kengligini belgilash uchun ishlatiladi.

CSSning max-width xususiyati elementning maksimal kengligini belgilash uchun ishlatiladi.

CSS da balandlik va kenglikni belgilash

CSSning height va width xususiyatlari elementning balandligi va kengligini belgilash uchun ishlatiladi.

height va width xususiyatlari o'zini ichiga padding, border va marginlarni olmaydi. U elementning padding, border va margin ichidagi maydonning balandligini va kengligini o'rnatadi.

Height va width qiymatlari

height va width xususiyatlari quyidagi qiymatlarni o'ziga olishi mumkin:

  • auto - default qiymat. Brauzer o'zi height va width qiymatlarini hisoblaydi

  • length - height/width larni px, cm va hokazolar asosida belgilanadi

  • % - O'z ichiga olgan blockning height/width qiymatlarini foizda belgilaydi

  • initial - height/width ga default qiymat beradi

  • inherit - height/width qiymatlari ota elementdan meros qilib olinadi.

CSS height va widthga misollar

<div> elementining balandligi va kenglini berish:

div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}

Boshqa bir <div> elementining balandligi va kenglini berish:

div {
  height: 100px;
  width: 500px;
  background-color: powderblue;
}

Note: height va width xususiyatlari padding, border yoki marginlarni o'z ichiga olmayasligini yodda saqlang! Ular elementning padding, border va margin ichidagi maydonning balandligi/kengligini o'rnatadi!

Max-widthni berish

max-width xususiyati elementning maksimal kengligini belgilash uchun ishlatiladi.

max-widthning uzunlik qiymatlari, px, cm va hokazolar orqali belgilanishi yoki o'z ichidagi blokning foizida belgilanishi, yoki umuman belgilamasligi ham mumkin. (Bu default. Maksimal kenglik yo'qligini bildiradi.)

Yuqoridagi <div> bilan bog'liq muammo shundaki, agar brauzer oynasi element kengligidan (500px) kichiklashganda yuzaga keladi. Keyin brauzer sahifaga gorizontal gorizontal scrollbar qo'shadi.

max-width dan foydalanish esa brauzerning kichik oynalar bilan ishlashini yaxshilaydi.

Tip: Brauzer oynasini 500px dan kichiklashtiring va ikkita divda qanday o'zgarish bo'lishini guvohi bo'ling!

Note: Agar biror bir sabab tufayli ikkala width hamda max-width xususiyatlaridan bir elementda foydalanishingizga to'g'ri kelsa va width qiymati max-width dan katta bo'lsa, max-width ishlatiladi va width qabul qilinmaydi.

Bu <div> ning height qiymati 100px va max-width qiymati 500px:

div {
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}

O'zingiz sinab ko'ring - misollar

Elementlarning balandligi va kengligini o'rnatish Ushbu misol turli elementlarning balandligi va kengligini qanday o'rnatishni ko'rsatadi.

Rasmning balandligi va kengligini foiz yordamida berish Ushbu misol rasmning balandligi va kengligini foiz qiymatidan foydalanib o'rnatishni ko'rsatadi.

Elementning minimal kengligi va maksimal kengligini berish Ushbu misol px qiymatidan foydalanib elementning minimal kengligi va maksimal kengligini qanday o'rnatishni ko'rsatadi.

Elementning minimal balandligi va maksimal balandligini berish Ushbu misol px qiymatidan foydalanib elementning minimal balandligi va maksimal balandligini qanday o'rnatishni ko'rsatadi.

CSSning barcha o'lchash xususiyatlari

PreviousCSS Padding

Last updated