Kode html jarak atas bawah
|
Tutorial Belajar CSS: Cara Mengatur Tinggi Baris dalam Paragraf HTML (line-height) Show
09 Sep 14 | | Tutorial CSS | |  Dalam tutorial CSS kali ini kita akan membahas tentang Cara Mengatur Tinggi Baris dalam Paragraf HTML. Tinggi baris atau besar “spasi paragraf” di dalam CSS diatur menggunakan property: line-height. Mengatur Tinggi Baris dalam Paragraf dengan line-heightYang dimaksud dengan tinggi baris dalam paragraf adalah besar jarak antara satu baris dengan baris di bawahnya. Dalam penggunaan sehari-hari kita menggunakan istilah “spasi paragraf” untuk hal ini. Misalnya agar tulisan skripsi menjadi lebih mudah dibaca, kita mengganti spasi (dalam aplikasi microsoft word) menjadi 1,5. Dibandingkan dengan jarak 1 spasi, pengaturan paragraf sebesar 1,5 spasi akan membuat jarak baris di dalam paragraf menjadi lebih “lega”. Didalam CSS, pengaturan “besar spasi” ini ditangani dengan property line-height. Nilai dari property line-height bisa diisi dengan nilai pixel, persen, em, atau angka(tanpa satuan). Berikut adalah contoh penulisannya: p {
line-height:16px;
}Cara Perhitungan Nilai line-heightJika nilai line-height ditetapkan dengan satuan pixel, perhitungan nilai line-height cukup sederhana. Untuk paragraf yang memiliki ukuran font (font-size) sebesar 14px, dan line-height sebesar 18px, maka jarak antar baris dihitung berdasarkan rumus berikut: 18px-14px. Hasil perhitungannya, yakni 4px adalah jarak antar baris yang dihasilkan. Jarak antar baris ini dikenal juga dengan istilah leading. Bagaimana jika satuannya dicantumkan dalam persen atau em? Jika kita membuat line-height: 150% atau line-height: 1.5em pada teks yang berukuran 14px, maka line-height akan menjadi 150%*14px=21px. Sehingga jarak antar baris (leading) untuk contoh ini adalah 21px-14px=7px. Selain satuan pixel, persen dan em, line-height juga memiliki satuan khusus yang digunakan untuk line-height, yaitu angka (tanpa satuan). Contoh penulisannya adalah sebagai berikut: p {
line-height:1.5;
}Bagaimana perhitungan hasil leading dari penulisan line-height ini? Dalam kebanyakan kasus, line-height:1.5 akan menghasilkan nilai yang sama dengan line-height: 150%. Namun untuk kasus tag di dalam tag (nested tag) hasil yang didapat akan berbeda. Misalkan kita membuat property line-height: 150% dan font-size: 14px pada tag . Karena sifat line-height ini diturunkan ke dalam tag-tag lain (bersifat inherit) maka seluruh tag di dalam halaman HTML akan mendapatkan nilai line-height yang sama. Akan tetapi, nilai line-height yang diturunkan bukanlah line-height:150%, namun hasil perhitungannya, yakni line-height sebesar 21px (hasil dari 150%*14px). Apabila di dalam halaman tersebut kita memiliki tag dengan font-size sebesar 36 pixel, maka line height:21px akan membuat paragraf susah dibaca. Dalam kasus ini, jika kita mengganti property line-height menjadi line-height:1.5 pada tag , maka setiap tag dibawahnya akan mendapatkan nilai line-height:1.5. Sehingga untuk paragraf dengan font-size: 36px, efek turunan line-height:1.5 akan menghasilkan nilai line-height: 54px (hasil dari 150%*36). Jika kita tidak mendefenisikan nilai line-height, maka web browser akan menggunakan nilai bawaan yang umumnya bernilai line-height:1.2. Tutorial Mengatur Tinggi Baris Paragraf (line-height)Sebagai contoh tutorial untuk property line-height yang telah kita bahas, berikut adalah kode HTML dan CSS dengan menggunakan berbagai nilai line-height:
Selain untuk mengatur tinggi baris dalam paragraf, property line-height sering juga digunakan untuk membuat text berada di tengah-tengah sebuah objek (vertical align). Misalkan kita memiliki kotak dengan tinggi 100px, dengan membuat nilai line-height: 100px, akan membuat text tampil di tengah-tengah kotak tersebut. Lebih jauh tentang hal ini akan kita bahas dalam pembahasan tutorial CSS tentang box model. eBook CSS Uncover Duniailkom Jika anda ingin belajar cara mendesain web, CSS wajib dikuasai. Duniailkom telah menyusun eBook CSS Uncover yang membahas CSS dengan lebih detail dan lebih lengkap, mulai dari dasar hingga fitur terbaru CSS3 seperti animasi dan web responsive. Penjelasan lebih lanjut bisa ke: eBook CSS Uncover Duniailkom. Apa itu pada HTML?Tikkan ; untuk menambahkan spasi di tempat yang Anda inginkan. Hasil kode ini dikenal sebagai non-breaking space atau spasi tetap karena mencegah pemisahan baris pada lokasi penempatan kode.
Apakah elemen HTML yang benar untuk memberikan jarak antar kata?Cara Membuat Spasi di HTML. Menggunakan Ini merupakan salah satu cara membuat spasi di HTML. Menggunakan kode . ... . Menggunakan Jika menggunakan kode untuk membuat jarak antar kata menjadi dua spasi makan kita harus mengetikan kode sebanyak dua kali. ... . Penggunaan . Manakah yang termasuk tag pembantu tag paragraf?Paragraf pada HTML dibuat dengan tag
. Selain tag ini, ada juga tag pendukung lain seperti ,
, , dan . Apa itu komentar pada HTML?Komentar pada HTML adalah potongan kode yang digunakan untuk menjelaskan kode-kode yang sedang ditulis dalam menyusun halaman HTML. Komentar ini akan diabaikan oleh browser dan tidak akan ditampilkan pada halaman HTML.
|
