line-height Özelliği

line-height özelliği, metin satırları arasındaki aralığı (satır aralığı) ayarlar.

Özellik, ilk bakışta anlaşılabileceği gibi satırlar arasındaki boşluğu belirlemez, metin satırının yüksekliğini belirler. Bu şu anlama gelir: gerçek satırlar arası boşluk şu şekilde hesaplanacaktır: line-height - font-size = metin satırları arasındaki mesafe. Veya tam tersi line-height = font-size + satırlar arasındaki mesafe.

Sözdizimi

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

Değerler

Özelliğin değeri olarak herhangi bir boyut birimi kullanılabilir. % cinsinden bir değer belirtildiğinde, satır aralığı yazı tipi boyutunun yüzdesi kadar olacaktır.

Ayrıca, sıfırdan büyük herhangi bir sayı da değer olarak belirtilebilir. Bu durumda, yazı tipi boyutunun çarpanı olarak algılanır. Örneğin, font-size değeri 20px ve line-height değeri 1.5 ise, bu line-height: 30px yazmakla aynıdır (20px * 1.5 = 30px).

Özelliğin varsayılan değeri normal'dir, bu durumda tarayıcı satır aralığını otomatik olarak seçer.

Örnek

Bu örnekte, metin satırları arasındaki mesafe line-height - font-size = 38px - 18px = 20px olacaktır:

<p>
	some long text
</p>

p {
	font-size: 18px;
	line-height: 35px;
	text-align: justify;
}

Örnek

Aralığı 25px - 18px = 7px'ye düşürelim:

<p>
	some long text
</p>

p {
	font-size: 18px;
	line-height: 25px;
	text-align: justify;
}

Örnek

Bu örnekte, metin satırları arasındaki mesafe line-height - font-size = 18px - 18px = 0px olacaktır - satırlar neredeyse birbirine yapışacaktır (üst satırdaki harflerin kuyrukları, alt satırdaki harflerin kuyruklarına değecektir):

<p>
	some long text
</p>

p {
	font-size: 18px;
	line-height: 18px;
	text-align: justify;
}

Örnek

Bu örnekte, line-height değeri, yazı tipi boyutunun 1.5 çarpanıdır. Dolayısıyla line-height, font-size * 1.5 = 18px * 1.5 = 27px değerine eşdeğer olacaktır. Satırlar arasındaki gerçek boşluk ise line-height - font-size = 27px - 18px = 9px olacaktır:

<p>
	some long text
</p>

p {
	font-size: 18px;
	line-height: 1.5;
	text-align: justify;
}

Örnek

Çarpanı artıralım:

<p>
	some long text
</p>

p {
	font-size: 18px;
	line-height: 2.5;
	text-align: justify;
}

Örnek

Eğer line-height, font-size'den küçük yapılırsa, satırlar tamamen üst üste binecektir:

<p>
	some long text
</p>

p {
	font-size: 18px;
	line-height: 13px;
	text-align: justify;
}