Min-height xususiyati

min-height xususiyati elementning minimal balandligini belgilaydi. Xususiyat qiymati sifatida istalgan o‘lchov birliklari yoki qiymat yo‘qligini anglatuvchi none kalit so‘zi qo‘llaniladi.

Odatda, suzuvchan kenglikka ega element uchun belgilanadi (balandlik foizlarda berilgan yoki umuman berilmagan, va element balandligi uning tarkibi bilan o‘zgaradi).

Agar minimal balandlik belgilangan bo‘lsa - element undan pastga tushishi mumkin emas. Agar matn min-height uchun zarur bo‘lgandan kam bo‘lsa, element min-height balandligiga ega bo‘ladi.

Agar matn ko‘p bo‘lsa - element balandligi matn miqdoriga qarab hisoblanadi.

Sintaksis

cssselector {
  min-height: qiymat;
}

Misol

Ushbu misolda balandlik umuman belgilanmagan va brauzer tomonidan matn miqdoriga qarab mustaqil ravishda hisoblanadi. Biroq, min-height xususiyati belgilanganligi sababli, balandlik ushbu qiymatdan pastga tushmaydi, hatto agar uning ichida matn bo‘lmasa ham:

html<div id="elem">
  Lorem ipsum dolor sit amet.
</div>

css#elem {
  min-height: 100px;
  width: 300px;
  border: 1px solid black;
}

Результат:

Misol

Keling, elementga ko‘proq matn qo‘shamiz - shunday qilib, blok balandligi oshib ketadi. Bunday holatda bizning blok shunchaki o‘z balandligini oshiradi:

html<div id="elem">
  some long text
</div>

css#elem {
  min-height: 100px;
  width: 300px;
  border: 1px solid black;
  text-align: justify;
}

Результат:

Misol

Taqqoslash uchun keling, minimal balandlikni olib tashlasak va uning o‘rniga height xususiyatini belgilasak, blok bilan nima bo‘lishini ko‘ramiz:

html<div id="elem">
  some long text
</div>

css#elem {
  height: 100px;
  width: 300px;
  border: 1px solid black;
  text-align: justify;
  margin-bottom: 50px;
}

Результат:

Shuningdek qarang