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
myNotlar
myNotlar