Jarak antara baris html. Dengan menukar jarak antara baris kod css, anda boleh memformat teks anda dengan cantik dan mudah dibaca

Kepada tukar jarak baris dalam HTML, anda tidak perlu memalu venir. Anda hanya perlu memohon pada objek yang anda ingin laraskan jarak ini, contohnya, pada perenggan teks (tag) atau pada elemen blok (

), gunakan sifat CSS ketinggian garisan. Harta ini boleh digunakan pada semua teg HTML.

Nilai ketinggian garis boleh ditetapkan sebagai peratusan, pengganda, unit ukuran (piksel (px), mata (pt), pematerian (pc), dll.), dan ia juga boleh mengambil nilai normal dan mewarisi.

Dengan biasa, jarak antara baris dikira secara automatik oleh penyemak imbas berdasarkan pertimbangannya sendiri; dengan warisan, nilai elemen induk diwarisi, i.e. teg di mana teg bersarang.

Mari kita tulis beberapa baris HTML.

Beginilah rupa jarak antara baris dalam perenggan dalam penyemak imbas dengan nilai 1 (iaitu pendahuluan tunggal) dan 70% pada tajuk (perhatikan bahawa apabila mengira dalam %, ketinggian fon diambil sebagai 100):

Jika kita menetapkan ketinggian garisan untuk teg

, menyelubungi kedua-dua tajuk dan perenggan, dan daripada mereka, sewajarnya, kami mengalih keluar harta ini, kami mendapat:

Jika kita menetapkan ketinggian garis = 0.4, kita mendapat pameran terkemuka negatif:

Mengapa mereka melakukan apa-apa dengan jarak antara baris? Kerana ia berbahaya? Tiada kaitan?

Jarak baris yang dipilih dengan betul boleh meningkatkan kebolehbacaan teks, dan ini merupakan aspek yang sangat penting dalam reka bentuk web, tipografi dan semua yang berkaitan dengan teks. Setuju bahawa apabila kami meningkatkan jarak antara baris dalam contoh kedua, teks menjadi lebih menyenangkan untuk dibaca, bukan? Tetapi ini tidak bermakna sama sekali bahawa lebih besar terkemuka, lebih tinggi kebolehbacaan teks. Selepas satu titik, garisan mula menjadi terlalu jauh antara satu sama lain, ia menjadi lebih sukar untuk mata bergerak dari satu ke yang lain, dan membaca menjadi tidak selesa. Ingat maksud emas.

Mengetuai

Ramai orang, termasuk pereka, fikir begitu tipografi- ia hanyalah pilihan muka taip, saiz fon dan sama ada ia harus biasa atau tebal. Bagi kebanyakan orang, di situlah ia berakhir. Tetapi tipografi yang baik memerlukan lebih banyak lagi, dan ini biasanya butiran yang sering diabaikan oleh pereka.
Butiran ini memberikan pereka kawalan sepenuhnya, membolehkan dia mencipta penyelesaian reka bentuk yang cantik dan konsisten dari segi tipografi. Walaupun semua ini digunakan untuk jenis media yang berbeza, dalam artikel ini kita akan memfokuskan pada cara menerapkannya pada reka bentuk web menggunakan CSS. Di sini 8 Cara Mudah untuk Memperbaik Tipografi Anda Menggunakan CSS dan oleh itu kebolehgunaan keseluruhan reka bentuk.

1. Dimensi

Saiz penetapan taip. Pada pandangan pembaca, garis panjang atau pendek memang memenatkan. Yang panjang memusnahkan irama, kerana sukar bagi pembaca untuk mencari baris teks seterusnya. Satu-satunya keadaan di mana garis pendek boleh diterima ialah sejumlah kecil teks. Untuk kebolehbacaan terbaik, panjang baris hendaklah antara 40 dan 80 aksara, termasuk ruang. Untuk reka bentuk dengan satu lajur teks, 65 aksara adalah sesuai.

Cara mudah untuk mengira panjang baris adalah dengan menggunakan kaedah Robert Bringhurst, yang mendarabkan saiz fon dengan 30. Iaitu, jika saiz fon ialah 10px, darabkannya dengan 30 akan memberi anda 300px atau lebih kurang 65 aksara setiap baris. Kod itu akan kelihatan seperti:
p(
saiz fon: 10px;
lebar maksimum: 300px;
}
Saya menggunakan px kerana ia menjadikan pengiraan lebih mudah, tetapi ia juga boleh digunakan.

2. Memimpin

Mendahului ialah ruang antara baris teks dalam badan nota dan memainkan peranan besar dalam kebolehbacaan. Pemisahan baris yang betul memudahkan pembaca mengikuti baris dan menambah baik penampilan teks. Peneraju juga mengubah warna tipografi teks, iaitu ketumpatan atau nada gubahan.
Peneraju dipengaruhi oleh banyak faktor: muka taip, saiz fon, kesempurnaannya, keadaan (?) , panjang baris, jarak perkataan, dsb. Semakin panjang barisan, semakin besar kedudukannya. Lebih besar saiz fon, lebih kecil terkemuka. Peraturan yang baik adalah untuk menetapkan pendahuluan adalah 2-5pt lebih besar daripada saiz fon, bergantung pada set kepala. Jadi jika fon ialah 12pt, maka untuk web, pendahuluan hendaklah 15pt atau 16pt.

Menentukan pendahuluan yang betul memerlukan sedikit kemahiran, tetapi di bawah ialah contoh rupa kod anda:
badan (

saiz fon: 12px;
ketinggian garis: 16px;
}

3. Mengendalikan sebut harga

Pemprosesan petikan hendaklah dilakukan dalam jidar teks. Jika tanda petikan bergabung dengan teks, ia memecahkan jidar kiri dan mengganggu rima blok teks. Mengendalikan tanda petikan tidak mengganggu penjajaran kiri dan keseimbangan dan oleh itu meningkatkan kebolehbacaan.

Ini mudah dicapai dengan CSS menggunakan elemen blockquote:
petikan blok(
inden teks: -0.8em;
saiz fon: 12px;
}

Lekukan negatif akan bergantung pada muka taip, saiz fon dan jidar.

4. Irama menegak

Grid garis dasar ialah asas untuk irama tipografi yang konsisten pada halaman. Ia membolehkan pembaca mengikuti teks dengan mudah, yang seterusnya meningkatkan kebolehbacaan. Irama berterusan dalam ruang menegak memegang teks pada grid malar supaya perkadaran dan keseimbangan kekal sama di seluruh halaman, tanpa mengira saiz fon, hadapan atau panjang baris.

Untuk mengekalkan irama menegak menggunakan CSS, jarak antara elemen dan jarak baris (teraju) adalah perlu sama dengan saiz grid garis dasar. Katakan anda menggunakan 15px grid garis dasar, membayangkan bahawa terdapat 15px antara setiap baris grid. Pendahuluan ialah 15px dan jarak antara perenggan juga ialah 15px. Berikut ialah contoh:
badan (
font-family: Helvetica, sans-serif;
saiz fon: 12px;
ketinggian garis: 15px;
}

P(
jidar bawah: 15px;
}

Ini membolehkan setiap perenggan dimuatkan pada grid sambil mengekalkan irama menegak teks.

5. Garisan gantung atas dan bawah

Tali gantung atas- baris teks atau perkataan di akhir perenggan. Garis Gantung Bawah- perkataan atau baris pendek teks pada permulaan atau akhir lajur yang dipisahkan daripada teks yang lain. Garis gantung atas dan bawah membentuk ketulan janggal, mengganggu mata pembaca dan menjejaskan kebolehbacaan. Ini boleh dielakkan dengan meningkatkan saiz fon, pendahuluan, panjang baris, jarak perkataan dan jarak huruf, atau dengan memasukkan pemisah baris secara manual.

Malangnya, tiada cara mudah untuk menghalang garisan berjuntai menggunakan CSS. Satu cara untuk menyingkirkannya telah diterangkan di atas, satu lagi ialah jQWidon't, pemalam jQuery yang meletakkan ruang tidak putus antara dua perkataan terakhir sesuatu elemen.

6. Pemilihan

Penting serlahkan perkataan tanpa mengganggu pembaca. Italic sering dilihat sebagai bentuk penyerlahan yang ideal. Beberapa bentuk penekanan biasa yang lain ialah: tebal, huruf besar, huruf besar kecil, saiz fon, warna, garis bawah atau muka taip lain. Tidak kira yang mana anda gunakan, cuba gunakan satu sahaja. Gabungan seperti huruf kecil – tebal – condong mengganggu dan kelihatan janggal.

Berikut ialah beberapa cara untuk menyerlahkan menggunakan CSS:
rentang (
gaya fon: condong;
}

H1 (
font-weight:bold;
}

H2 (
text-transform: huruf besar;
}

B (
font-variant: huruf kecil;
}
Perlu diingat bahawa varian fon hanya berfungsi jika fon menyokong huruf kecil.

Apabila bekerja dengan gaya teks, anda boleh menetapkan jarak yang diperlukan antara aksara, perkataan dan baris. Jarak sedemikian ditetapkan dalam mana-mana unit CSS, sama ada px, pt, em atau lain-lain. Pengecualian ialah peratusan - ia boleh digunakan untuk menetapkan jarak antara baris (memimpin), tetapi ia tidak berfungsi apabila menetapkan jarak antara aksara atau perkataan.

Jarak aksara CSS: jarak huruf

Anda boleh menetapkan jarak aksara menggunakan sifat jarak huruf CSS. Sebagai tambahan kepada nilai biasa (positif dan negatif), anda juga boleh menggunakan nilai warisan (untuk mewarisi nilai daripada induk) dan normal (jika anda ingin mengembalikan jarak normal antara aksara).

Contoh menulis selang antara aksara:

P (jarak huruf: 2em; )

Jarak antara perkataan: jarak perkataan

Sifat jarak perkataan CSS berbeza daripada yang sebelumnya kerana ia menetapkan jarak antara perkataan, bukan antara aksara. Harta ini juga mempunyai nilai normal dan warisan. Anda boleh menentukan nilai negatif. Di bawah ialah contoh entri gaya:

P (jarak perkataan: 6px; )

Jarak baris: ketinggian baris

Menggunakan sifat ketinggian garis CSS, anda boleh menetapkan jarak antara baris teks. Seperti yang dikatakan pada permulaan topik, untuk menetapkan pendahuluan, sebagai tambahan kepada unit pengukuran lain, anda boleh menggunakan peratusan. Ia juga mungkin untuk menulis nilai sebagai pengganda (nombor lebih besar daripada 0): untuk mengira jarak, penyemak imbas akan mendarabkan saiz fon dengan nombor yang diberikan. Nilai negatif tidak berfungsi. Nilai yang ada adalah normal dan diwarisi.

Di bawah ialah contoh cara melakukan jarak baris CSS:

P (ketinggian garisan: 180%; )

Dalam tangkapan skrin anda boleh melihat rupa teks dengan ketiga-tiga sifat:

Petikan skrin: Jarak dalam CSS

Keputusan

Apabila menetapkan jarak antara perkataan, aksara atau baris, pertama sekali pastikan teks yang terhasil mudah dibaca. Sifat sedemikian mesti dikendalikan dengan berhati-hati dan sentiasa digunakan secara sederhana, tanpa fanatik, jika tidak semua kandungan teks mengancam untuk bertukar menjadi satu set huruf yang tidak boleh dibaca.

Dalam CSS, menetapkan jarak baris adalah sangat mudah. Terdapat harta khas untuk ini. Tetapi, sudah tentu, terdapat banyak parameter lain yang universal dan boleh digunakan pada teks.

Jika tiada tetapan dibuat, nilai lalai ditetapkan. Anda boleh menukar jarak ini jika anda mahu. Nilai boleh sama ada peratusan atau piksel.

Ketinggian baris

Dalam CSS, jarak antara baris boleh ditunjukkan oleh imej berikut.

Imej di atas menunjukkan parameter dengan jarak yang sepadan. Teks terletak dalam ruang saiz fon. Sila ambil perhatian bahawa baris teks tidak bermula di pangkal, tetapi sedikit di atas. Ruang di bawah disediakan untuk huruf yang mempunyai unsur di bawah (g, y, dan seterusnya).

Ambil perhatian bahawa ruang antara blok saiz fon dipanggil terkemuka. Sifat ini tidak muncul dalam HTML dan CSS, tetapi ia terdapat dalam penyunting grafik dan teks yang lain. Sebagai contoh, dalam Adobe Photoshop.

Rajah di atas menunjukkan tempat anda boleh menentukan peneraju dalam Photoshop. Dan di sebelahnya ialah parameter saiz fon.

Contoh penggunaan line-height

Dalam CSS, jarak antara baris boleh ditetapkan sebagai peratusan. Contoh ilustrasi diberikan di bawah.

Jika nilainya kecil, ia akan menyusahkan pengguna tapak anda untuk membaca.

Jarak juga boleh diubah mengikut saiz fon. Jika perbezaan antara parameter utama sangat berbeza dalam nombor, maka perbezaan ini dikompensasikan dengan meningkatkan pendahuluan.

Kehalusan reka bentuk

Dalam CSS, jarak antara baris boleh diselaraskan lagi dengan pelbagai padding. Mari lihat contoh dalam rajah.

Dalam kes kami, medan "Elemen" akan mengandungi teks. Padding ialah padding di dalam objek, dan margin ialah padding di belakang objek. Sempadan adalah bingkai. Ia mungkin 0 piksel, atau mungkin 100.

Imej berikut menunjukkan semua padding, jidar dan ketinggian garisan teks sekali gus.

Jika teks anda kecil, hanya satu baris, atau setiap baris berada dalam perenggan yang berasingan, maka jarak boleh dilaraskan dengan menginden antara perenggan ini. Iaitu, maring dan padding antara garisan dalam satu elemen tidak mempunyai kesan. Mereka membuat lekukan hanya di sepanjang tepi objek. Objek adalah keseluruhan perenggan, bukan baris di dalamnya. Adalah penting untuk tidak keliru di sini.

Dalam kes di mana terdapat banyak baris, dan semua ini terletak dalam satu objek, adalah disyorkan untuk menukar fon dengan parameter utama.

Bagaimana untuk meningkatkan jarak antara baris CSS

Jarak antara baris HTML boleh ditentukan untuk mana-mana kelas atau untuk semua perenggan dalam teks. Jika anda menyatakannya seperti ini: p ( line-height:20px; ), maka benar-benar semua perenggan pada halaman akan mempunyai baris sebanyak 20 piksel. Jika anda memerlukan saiz yang berbeza di tempat yang berbeza, disyorkan untuk melakukannya seperti berikut.

Kami menulis gaya.

Kelas1 ( line-height:20px; )

Kelas2 ( line-height:16px; )

Kelas3 ( line-height:12px; )

Untuk kejelasan, mari tambah bingkai supaya anda boleh melihat bahawa ia berfungsi. Pada masa akan datang ia perlu dikeluarkan.

Sila ambil perhatian bahawa dalam kes ketiga jalur itu melepasi teks. Ini kerana ia lebih besar daripada ketinggian garisan. Oleh itu, adalah penting untuk memastikan bahawa tidak ada percanggahan sedemikian. Jika anda membuat ketinggian garisan kecil, kemudian kurangkan fon dengan sewajarnya.

Ia tidak disyorkan untuk menjadikan teks terlalu kecil dan ruang antara baris terlalu kecil. Kerana tiada pengguna boleh membaca semua ini dengan tenang. Matanya akan cepat letih. Enjin carian juga mengatakan bahawa teks harus mesra pengguna.

Lebih-lebih lagi, baru-baru ini terdapat penekanan yang besar terhadap kemudahan untuk pengguna mudah alih. Di sana, cadangan sentiasa mengatakan bahawa saiz fon harus biasa, bukan kecil. Ini terutamanya mempengaruhi pautan. Dengan saiznya yang kecil, ia akan menjadi sukar bagi pengguna untuk menavigasi tapak.

Enjin carian Google mempunyai alat khas yang membantu dengan analisis ini. Ia sangat mudah untuk juruweb.

Berikut ialah contoh keputusan yang mungkin berlaku.

Harta benda ketinggian garisan menetapkan jarak antara baris teks (baris baris). Harta ini tidak menetapkan ruang antara baris teks seperti yang kelihatannya, ia ditetapkan ketinggian baris teks. Ini bermakna ruang sebenar antara baris akan dikira seperti ini: ketinggian garisan - Saiz huruf= jarak antara baris teks. Atau sebaliknya ketinggian garisan = Saiz huruf+ jarak antara baris teks.

Harta benda ketinggian garisan kadangkala digunakan dengan cara yang tidak standard untuk memusatkan teks pada ketinggian.

Sintaks

Pemilih ( garis-ketinggian: unit CSS | peratus | pengganda | biasa | warisan; )

Nilai

Secara lalai, penyemak imbas memilih jarak baris secara automatik ( biasa).

Contoh

ketinggian garisan - Saiz huruf= 35px - 13px = 21px:

P (saiz fon: 13px; ketinggian baris: 35px; )

Hasil pelaksanaan kod:

Contoh

Mari kita kurangkan jurang kepada 21px - 13px = 7px:

P (saiz fon: 13px; ketinggian garis: 21px; )

Hasil pelaksanaan kod:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Contoh

Dalam contoh ini, jarak antara baris teks ialah ketinggian garisan - Saiz huruf = 13px - 13px = 0px- garisan hampir melekat (ekor huruf baris atas akan menyentuh ekor huruf bawah):

P (saiz fon: 13px; ketinggian garis: 13px; )

Hasil pelaksanaan kod:

Contoh

Dalam contoh ini nilai ketinggian garisan- pengganda 1.5 daripada saiz fon. Oleh itu ketinggian garisan akan setara Saiz huruf * 1.5 = 13px * 1.5 = 20px. Dan ruang sebenar antara baris adalah ketinggian garisan - Saiz huruf = 20px - 13px = 7px: