Belajar Kode CSS & Desain Blog: CSS line-height Property

Berfungsi untuk mengatur jarak antar baris teks. Nilai yang digunakan berupa angka (ekuivalen dengan satuan em), dalam satuan px, pt, em, cm, etc (length) dan % (persen). Nilai line-height dalam persen ditentukan berdasarkan ukuran font. Dalam property line-height tidak berlaku nilai negatif. Jika ingin membuat setiap baris lebih rapat atau hingga baris teks bertumpuk gunakan nilai yang semakin kecil.

Deklarasi line-height property

line-height: value;

line-height: number;
line-height: 1.5;

line-height: length;
line-height: 1.5em;
line-height: 24px;

line-height: percentage;
line-height: 150%;

Contoh penggunaan:

<style type="text/css>
h3.jomblo{
      font-size:1.5em;
      line-height:200%;
}
pre{
      font:normal 12px Courier;
      line-height:18px;
}
</style>

<h3 class="jomblo">
Text here!
Text here!
Text here!
</h3>

<pre>
Text here!
Text here!
Text here!
</pre>

Edit kode dalam box demo online di bawah ini untuk mengetahui dengan lebih jelas efek penggunaan line-height property dengan berbagai bentuk nilai yang bisa digunakan.

Please click the button to display. Continue with editing code and click to see the results!

<!DOCTYPE html>
<html>
<title>CSS line-height Property</title>
<head>
<style type="text/css">
#konten{margin:15px 5px;padding:20px;background:#eee;box-shadow:0 0 20px #555;border-radius:6px;}
h2{padding-bottom:5px;color:green;margin:3px 0;}
</style>

<style type="text/css">
h3{
      width:400px;
      margin:3px 0;
      padding:0 5px;
      border:1px solid #333;
      font-size: 2em;
}
h3.satu{
      line-height:2;
}

h3.dua-A{
      line-height:2em;
}

h3.dua-B{
      line-height:1em;
}

h3.tiga{
      line-height:32px;
}
h3.empat{
      line-height:200%;
}
h3.lima{
      line-height:60%;
}
h3.enam{
      line-height:20%;
}
</style> 

</head>

<body>
<div id="konten">
<h2>line-height » 2</h2>

<h3 class="satu">Perhatikan jarak antar baris Perhatikan jarak antar baris</h3>

<h2>line-height » 2em</h2>

<h3 class="dua-A">Perhatikan jarak antar baris Perhatikan jarak antar baris</h3>

<h2>line-height » 1em</h2>

<h3 class="dua-B">Perhatikan jarak antar baris Perhatikan jarak antar baris</h3>


<h2>line-height » 32px</h2>

<h3 class="tiga">Perhatikan jarak antar baris Perhatikan jarak antar baris</h3>

<h2>line-height » 200%</h2>

<h3 class="empat">Perhatikan jarak antar baris Perhatikan jarak antar baris</h3>

<h2>line-height » 60%</h2>

<h3 class="lima" style="padding:10px 5px;">Perhatikan jarak antar baris Perhatikan jarak antar baris</h3>

<h2>line-height » 20%</h2>

<h3 class="enam" style="padding:20px 5px;">Perhatikan jarak antar baris Perhatikan jarak antar baris</h3>


</div>
</body> 
</html>

Belajar Kode CSS & Desain Blog

Halaman

CSS line-height Property

Deklarasi line-height property

Contoh penggunaan:

Tidak ada komentar:

Posting Komentar

Archive Blog C l o s e

Arsip Blog

My Profile C l o s e

Mengenai Saya

Follower C l o s e

Follower

RSS C l o s e

Label C l o s e

Label

Halaman

date_replace('9.12.2012');

CSS line-height Property

Deklarasi line-height property

Contoh penggunaan:

Tidak ada komentar:

Posting Komentar

Archive BlogC l o s e

Arsip Blog

My ProfileC l o s e

Mengenai Saya

FollowerC l o s e

Follower

RSSC l o s e

LabelC l o s e

Label

Archive Blog C l o s e

My Profile C l o s e

Follower C l o s e

RSS C l o s e

Label C l o s e