line-height adalah salah satu property pada css, sedangkan fungsinya untuk mengatur tinggi antar baris paragraf
value line-height
berikut value line-height
- length/panjang angka dalam (px, em, in)
- percentage(%)
- normal
contoh property line-height dalam inline style
line-height:20px
dengan line-height 20px ini kita membuat style dimana tinggi antar paragraf setinggi 20px
contoh
<div style="clear:both;background-color:lime;width:500px;line-height:20px;">
ini line height:20px
ini line height:20px
ini line height:20px
ini line height:20px
</div>
tampilanya seperti ini
ini line height:20px
ini line height:20px
ini line height:20px
line-height:40px
dengan line-height 40px ini kita membuat style dimana tinggi antar paragraf setinggi 40px
contoh
<div style="clear:both;background-color:lime;width:500px;line-height:40px;">
ini line height:40px
ini line height:40px
ini line height:40px
ini line height:40px
</div>
tampilanya seperti ini
ini line height:40px
ini line height:40px
ini line height:40px
line-height:100%
dengan line-height 100% ini kita membuat style dimana tinggi antar paragraf sebesar 100%
contoh
<div style="clear:both;background-color:lime;width:500px;line-height:100%;">
INI ADALAH line height 100%
INI ADALAH line height 100%
INI ADALAH line height 100%
INI ADALAH line height 100%
</div>
tampilanya seperti ini
INI ADALAH line height 100%
INI ADALAH line height 100%
INI ADALAH line height 100%
line-height:150%
dengan line-height 150% ini kita membuat style dimana tinggi antar paragraf sebesar 150%
contoh
<div style="clear:both;background-color:lime;width:500px;line-height:150%;">
ini line height:150% ini line height:150% ini line height:150% ini line height:150% ini line height:150% ini line height:150% ini line height:150% ini line height:150% ini line height:150% ini line height:150% ini line height:150% ini line height:150% ini line height:150% ini line height:150% ini line height:150% ini line height:150%
</div>
tampilanya seperti ini
line-height:normal
dengan line-height normal ini kita membuat style dimana tinggi antar paragraf normal
contoh
<div style="clear:both;background-color:lime;width:500px;line-height:normal;">
ini line height:150% ini line height:150% ini line height:150% ini line height:150% ini line height:150% ini line height:150% ini line height:150% ini line height:150% ini line height:150% ini line height:150% ini line height:150% ini line height:150% ini line height:150% ini line height:150% ini line height:150% ini line height:150%
</div>
tampilanya seperti ini
ini line height normal
ini line height normal
ini line height normal
ini line height normal
ini line height normal
ini line height normal
ini line height normal
contoh line-height dalam internal style kompleks
perhatikan code dibawah
<html>
<head>
<title>line-height css</title>
<meta content="indam url:http://www.indaam.com" name="author"/>
<style type="text/css">
body{background-color:pink;}
#misalline-height1{
line-height:250%;
}
#misalline-height2{
line-height:40px;
}
#misalline-height3{
line-height: 60px;
}
#misalline-height4{
line-height:150%;
}
.anggapsebagaikotak{
clear:both;
background-color:white;
width:400px;
margin:20px;
padding:10px;
}
</style>
</head>
<body>
<div class="anggapsebagaikotak" id="misalline-height1">
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
</div>
<div class="anggapsebagaikotak" id="misalline-height2">
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
</div>
<div class="anggapsebagaikotak" id="misalline-height3">
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
</div>
<div class="anggapsebagaikotak" id="misalline-height4">
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
</div>
<div style="clear:both;"></div>
<p>salam <a href="http://www.indaam.com" title="indam site" target="_blank">indaam site</a></p>
</body>
</html>
untuk melihat hasilnya
- copy markup style diatas
- paste ke notepad
- save as (pilih all types) dengan nama contohline-height.htm
- jalankan(double click), atau
- open with (firefox, ie, opera, safari, chrome)
- silakan edit valuenya
- letak valuenya antara : (titik dua) dan ;(titik koma)
- selamat belajar
semoga bermanfaat
Sorry, formulir komentar sedang dalam perbaikan