Nilai line-height
Normal
Nilai line-height sekitar 1.2em atau 1.1em, tetapi tergantung browser yang digunakan dan elemen font.
Number
Nilai line-height didapat dari hasil kali ukuran font dengan 1.1. Misalnya, ukuran font (font-size) 30px, maka 30px × 1.1) = 33px. Line heightnya sekitar 33px. Namun, ini tidak harus diterapkan - Anda bebas menaikkan nilai line-height atau menurunkannya.
Percentage
Nilai line-height ditentukan dalam persen (%). Line-height 1.2 em sama dengan 120% (120/100).
Contoh: lineheight.html
<!DOCTYPE HTML>
<html>
<head>
<title>Properti line-height</title>
<style type="text/css">
div.box1{font-size:20px; line-height:22px; margin-bottom:1em;}
div.box2{font-size:15px; line-height:16.5px; margin-bottom:1em;}
div.box3{font-size:10px; line-height:1.2em; margin-bottom:1em;}
</style>
</head>
<body>
<div class="box1">4mcss.blogspot.com merupakan blog tempat belajar css.
4mcss.blogspot.com merupakan blog tempat belajar css.
4mcss.blogspot.com merupakan blog tempat belajar css.
4mcss.blogspot.com merupakan blog tempat belajar css.
4mcss.blogspot.com merupakan blog tempat belajar css.</div>
<div class="box2">Css di dunia nyata seperti sayur tanpa garam.
Css di dunia nyata seperti sayur tanpa garam.
Css di dunia nyata seperti sayur tanpa garam.
Css di dunia nyata seperti sayur tanpa garam.
Css di dunia nyata seperti sayur tanpa garam.</div>
<div class="box3">
Belajar css harus sabar dan giat, supaya menjadi master css.
Belajar css harus sabar dan giat, supaya menjadi master css.
Belajar css harus sabar dan giat, supaya menjadi master css.
Belajar css harus sabar dan giat, supaya menjadi master css.
Belajar css harus sabar dan giat, supaya menjadi master css.
</div>
</body>
</html>Output:
 |
| Tampilan line-height di Firefox. |
Referensi tulisan:
- line-height Css; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 13 Maret 2015.
About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
Tidak ada komentar:
Posting Komentar