lineHeight

lineHeight özelliği, element içindeki en düşük satır yüksekliğini belirler.

DOM Sözdizimi

element.style.lineHeight = "yukseklik"

CSS Sözdizimi

line-height: yukseklik

yukseklik

Sayı, yükseklik ve yüzde olarak üç türlü değer alabilir.

Sayı : Kayar noktalı olabilen bu sayı ile elementin font-size özelliği çarpılarak yükseklik belirlenir.
Yükseklik : CSS Ölçü Birimleri ile tam yüksekliği belirler.
Yüzde : Elementin font-size değerinin bu yüzde oranı ile oranlayarak yükseklik belirlenir.

Aşağıdaki örnek, CSS line-height özelliğine kayar noktalı sayı, ölçü birimi ve yüzde değer atanarak satır yüksekliklerinin ayarlanmasını göstermektedir.


<style type="text/css">
#ornekDiv1, #ornekDiv2, #ornekDiv3 {
    background-color:silver;
    margin:2px;
}
#ornekDiv1 { line-height: 1.5; font-size: 10pt }
#ornekDiv2 { line-height: 1.5em; font-size: 10pt }
#ornekDiv3 { line-height: 150%; font-size: 10pt }
</style>

<script type="text/javascript">

var getElem = function(a) {return document.getElementById(a);}

function yukAyarla(deger)
{
    getElem("ornekDiv1").style.lineHeight = deger;
    getElem("ornekDiv2").style.lineHeight = deger;
    getElem("ornekDiv3").style.lineHeight = deger;
}
</script>

<b>line-height: </b>
<select onChange="yukAyarla(this.value)" style="width:50px;">
    <option value="1.0">1.0</option>
    <option value="1.5">1.5</option>
    <option value="2.0">2.0</option>
    <option value="3.0">3.0</option>
</select>

<div id="ornekDiv1">myNotlar</div>
<div id="ornekDiv2">myNotlar</div>
<div id="ornekDiv3">myNotlar</div>

Test Edin

line-height:

myNotlar

İlgili Başlıklar