CSS Height, Width va Max-Width

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

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

Bu element 50 piksel balandlikka va 100% kenglikka ega.

CSS Balandlik va Kenglikni O'rnatish

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

height va width xususiyatlari padding, border yoki marginlarni o'z ichiga olmaydi. Ular elementning padding, border va margin ichidagi maydonning balandligi/kengligini belgilaydi.

CSS Height va Width Qiymatlari

height va width xususiyatlari quyidagi qiymatlarga ega bo'lishi mumkin:

auto - Bu default qiymat. Brauzer balandlik va kenglikni hisoblaydi
length - Balandlik/kenglikni px, sm va boshqalarda belgilaydi
% - Balandlik/kenglikni qamrab oluvchi blokning foizida belgilaydi
initial - Balandlik/kenglikni default qiymatiga o'rnatadi
inherit - Balandlik/kenglik ota elementdan meros qilib olinadi

CSS Height va Width Misollari

Bu element 200 piksel balandlikka va 50% kenglikka ega.

Misol <div> elementining balandlik va kengligini o'rnating:

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

Bu element 100 piksel balandlikka va 500 piksel kenglikka ega.

Misol Boshqa bir <div> elementining balandlik va kengligini o'rnating:

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

Eslatma

height va width xususiyatlari padding, border yoki marginlarni o'z ichiga olmaydi! Ular elementning padding, border va margin ichidagi maydonning balandligi/kengligini belgilaydi!

Max-width O'rnatish

max-width xususiyati elementning maksimal kengligini belgilash uchun ishlatiladi.

max-width px, sm kabi uzunlik qiymatlarida, yoki qamrab oluvchi blokning foizida (%) belgilanishi mumkin yoki none (bu default qiymat. Bu hech qanday maksimal kenglik yo'qligini anglatadi) ga o'rnatilishi mumkin.

Yuqoridagi <div> bilan bog'liq muammo shundaki, brauzer oynasi element kengligidan (500px) kichik bo'lganda paydo bo'ladi. Keyin brauzer sahifaga gorizontal scroll qo'shadi.

Bunday vaziyatda max-widthdan foydalanish brauzerning kichik oynalarni boshqarishini yaxshilaydi.

Maslahat

Brauzer oynasini 500px dan kichik kenglikka tortib ko'ring, ikki <div> o'rtasidagi farqni ko'ring!

Bu element 100 piksel balandlikka va 500 piksel maksimal kenglikka ega.

Eslatma

Agar biron bir sababga ko'ra bir elementda width xususiyati va max-width xususiyatini birgalikda ishlatsangiz va width xususiyatining qiymati max-width qiymatidan kattaroq bo'lsa; bu holda max-width xususiyati ishlatiladi (va width xususiyati e'tiborga olinmaydi).

Misol Bu <div> elementi 100 piksel balandlikka va 500 piksel maksimal kenglikka ega:

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

O'zingizni Sinab Ko'ring - Misollar

Elementlarning balandligi va kengligini o'rnating Ushbu misol turli elementlarning balandlik va kengligini qanday o'rnatishni ko'rsatadi.
Rasmning balandligi va kengligini foizda o'rnating Ushbu misol rasmning balandligi va kengligini foiz qiymatda qanday o'rnatishni ko'rsatadi.
Elementning min-width va max-width qiymatlarini o'rnating Ushbu misol elementning minimal kengligi va maksimal kengligini piksellar qiymatida qanday o'rnatishni ko'rsatadi.
Elementning min-height va max-height qiymatlarini o'rnating Ushbu misol elementning minimal balandligi va maksimal balandligini piksellar qiymatida qanday o'rnatishni ko'rsatadi.

Mashqlar Bilan O'zingizni Sinang

Mashq: <h1> elementining balandligini "100px" ga o'rnating.

<style>
  h1 {
    height: 100px;
  }
</style>
 
<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>

Barcha CSS O'lcham Xususiyatlari

Xususiyat	Tavsif
`height`	Elementning balandligini belgilaydi
`max-height`	Elementning maksimal balandligini belgilaydi
`max-width`	Elementning maksimal kengligini belgilaydi
`min-height`	Elementning minimal balandligini belgilaydi
`min-width`	Elementning minimal kengligini belgilaydi
`width`	Elementning kengligini belgilaydi

CSS Height, Width va Max-Width

Ushbu sahifada