min-height Özelliği

min-height özelliği, bir öğenin minimum yüksekliğini belirler. Özelliğin değeri boyut birimlerindan herhangi biri veya bir değerin olmadığını belirten none anahtar kelimesidir.

Genellikle değişken genişliğe sahip bir öğe için ayarlanır (yükseklik yüzde olarak belirlenmiştir veya hiç belirlenmemiştir ve öğe yüksekliği içeriği tarafından genişletilir).

Bir minimum yükseklik belirlenmişse - öğe bundan daha küçük olamaz. Eğer metin, min-height için gerekenden daha azsa, öğe min-height yüksekliğine sahip olacaktır.

Ancak metin daha fazla ise - öğenin yüksekliği metnin miktarına bağlı olarak hesaplanacaktır.

Sözdizimi

seçici {
	min-height: değer;
}

Örnek

Bu örnekte yükseklik hiç ayarlanmamıştır ve tarayıcı tarafından metin miktarına bağlı olarak bağımsız olarak hesaplanacaktır. Ancak, min-height özelliği ayarlandığı için, yükseklik bu değerden daha küçük olamayacaktır, içinde hiç metin olmasa bile:

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

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

Örnek

Öğeye daha fazla metin ekleyelim - böylece blok yükseklik olarak taşsın. Bu durumda bloğumuz sadece yüksekliğini artıracaktır:

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

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

Örnek

Karşılaştırma için, minimum yüksekliği kaldırıp yerine height özelliğini ayarlarsak blokta ne olacağına bir bakalım:

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

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

Ayrıca Bakınız

bir öğenin maksimum yüksekliğini belirleyen max-height özelliği
bir öğenin maksimum genişliğini belirleyen max-width özelliği
bir öğenin minimum genişliğini belirleyen min-width özelliği