CSS fungsi Property Line-Height serta Valuenya

line-height adalah salah satu property pada css, sedangkan fungsinya untuk mengatur tinggi antar baris paragraf, valuenya antara lain length, pencent, normal

Milioner yang suka tertawa jarang dijumpai. Pengalamanku adalah kekayaan mudah membuat senyum hilang. Andrew Carnegie

line-height adalah salah satu property pada css, sedangkan fungsinya untuk mengatur tinggi antar baris paragraf, valuenya antara lain length, pencent, normal

Last Modif at July 10th, 2011

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

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%

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
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.net" 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.net" 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

Indam

A geek, frontend developer. Like you, coding & experiment.
#web #design #ui #ux #standard #dreamer
#welding #interisti #beer #coffee

2 thoughts on “CSS fungsi Property Line-Height serta Valuenya”

  1. Jadi hanya akan berlaku pada Teks atau paragraf dan bukan untuk antar elemen ya mas ?

  2. shizenku says:

    terimakasih infonya. .,

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Disclaimer, FAQ & License

Hello Gaes, untuk tujuan apapun semua content text di blog ini dapat di copas, tanpa harus menulis sumbernya. Namun content yang berupa gambar--harus Anda periksa kembali lisensinya.

Adapun(mungkin) sebagian content blog ini sudah kadaluarsa atau sudah tidak relevan, contoh :'Theme default WordPress 3+ adalah Twentyten 'apakah selamanya Twentyten?' ngga kan? Indam selaku pengelolah berharap melaporkan jika menemukan content basi yang mungkin dapat menimbulkan salah persepsi tentang content dan konsep itu sendiri. Oia, karena blog ini bersifat pribadi dan bukan untuk komersil, mungkin anda juga akan menemukan tulisan tentang aku dan hal-hal rancu yang sama sekali ngga ada hubungan dengan web dan blog-blogan. Perlu dicatat: Indam selaku pengelolah tidak bertanggung jawab atas kerugian materi, waktu, tenaga, pikiran yang mungkin ditimbulkan dari sini. So, pandai-pandai yah dalam memilah informasi. Thanks for reading.

Quote

Ketika Anda melihat orang lain mengangkat dirinya dengan cara merendahkan orang lain, sebenarnya orang itu lebih rendah dari mereka yang direndahkan. Phidias--greece filsuf

+
-