Tetapan dalam CSS: jarak baris

Dalam CSS, jarak antara baris adalah sangat mudah untuk menubuhkan. Untuk tujuan ini terdapat harta khas. Tetapi, sudah tentu, terdapat banyak parameter lain, yang universal dan boleh digunakan untuk teks.

Jika tiada perubahan dilakukan, anda adalah bersedia untuk nilai lalai. anda boleh menukar jarak jika dikehendaki. nilai boleh sama ada peratusan atau piksel.

berturut-turut Tinggi

Jarak di antara baris CSS boleh ditunjukkan oleh rajah berikut.

Dalam imej di atas menunjukkan parameter dengan jarak sepadan. Teks ini adalah dalam ruang font-size. Ambil perhatian bahawa garis teks yang tidak bermula di pangkal dan lebih tinggi sedikit. Ruang yang disediakan di bawah untuk surat yang mempunyai unsur-unsur bawah (g, y, dan sebagainya).

Ambil perhatian bahawa ruang antara blok font-size itu dipanggil terkemuka. Dengan HTML dan CSS hartanah ini tidak muncul, tetapi ia adalah dalam editor grafik dan teks lain. Sebagai contoh, dalam Adobe Photoshop.

Rajah di atas menunjukkan di mana dalam "Photoshop", anda boleh menentukan terkemuka. Dan seterusnya dinyatakan tetapan font-size.

Contoh menggunakan barisan ketinggian

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

Dalam hal nilai-nilai kecil daripada pengguna laman web anda akan menjadi sukar untuk dibaca.

Jarak yang boleh diubah dan saiz fon. Jika perbezaan di antara parameter asas akan berbeza jauh dalam jumlah, perbezaan adalah diimbangi oleh peningkatan terkemuka.

kehalusan reka bentuk

Jarak di antara baris CSS lanjut boleh menyesuaikan pelbagai inden. Pertimbangkan contoh dalam rajah.

Dalam "Element" dalam kes ini akan menjadi teks. Padding - padding yang ada di dalam objek, dan margin - lekukan objek. Border - bingkai ini. Ia boleh 0 piksel, dan mungkin 100.

Imej berikut menunjukkan segera semua margin, bingkai dan ketinggian baris teks.

Jika anda mempunyai teks kecil, semua dalam satu baris, atau setiap baris dalam perenggan yang berasingan, jarak boleh diselaraskan antara perenggan yang tersusun. Itulah Maring dan padding antara baris dalam satu sel akan mempunyai kesan. Mereka mencipta lekukan hanya di tepi objek. Objek - keseluruhan perenggan ini, dan bukannya garisan di dalamnya. Ia adalah penting untuk tidak keliru.

Dalam kes-kes di mana sebilangan besar baris, semua yang berada dalam objek yang sama, font adalah disyorkan untuk menukar parameter asas.

Bagaimana untuk meningkatkan jarak antara baris CSS

Jarak antara baris HTML, anda boleh mendaftar untuk mana-mana kelas atau untuk perenggan dalam teks. Jika anda nyatakan seperti ini: p {line-height: 20px; } - maka benar-benar semua perenggan di laman tersebut akan menjadi rentetan 20 piksel. Jika anda mahu di tempat yang berbeza dalam saiz yang berbeza, ia adalah disyorkan untuk melakukan seperti berikut.

Kami menetapkan gaya.

.class1 {line-height: 20px; }

.class2 {line-height: 16px; }

.class3 {line-height: 12px; }

Untuk penjelasan, kita menambah bingkai, supaya anda boleh melihat bahawa ia berfungsi. Pada masa akan datang, ia mesti dikeluarkan.

Seterusnya, kami menggunakan kelas ini. hasilnya adalah seperti berikut.

Perhatikan bahawa dalam kes ketiga, band ini memandu ke teks. Semua disebabkan oleh hakikat bahawa saiz font lebih besar daripada ketinggian garis. Oleh itu, adalah penting untuk memastikan bahawa konflik itu tidak. Jika anda melakukan ketinggian garis kecil, masing-masing, mengurangkan fon.

Ia tidak digalakkan untuk melakukan teks terlalu sedikit dan jarak yang dekat antara baris. Kerana tidak ada pengguna tidak akan dapat membacanya semua dengan tenang. Dia mata cepat letih. Enjin carian juga mengatakan bahawa teks yang user-friendly.

Lebih-lebih lagi, dalam beberapa tahun kebelakangan ini terdapat penekanan yang kuat kepada kebolehgunaan bagi pengguna mudah alih. cadangan Terdapat sentiasa berkata bahawa saiz font harus normal, tidak kecil. Terutama kuat ia memberi kesan kepada rujukan. Dengan saiznya yang kecil pengguna akan sukar untuk digunakan pandu arah laman.

Dalam enjin carian "Google" adalah alat khas yang membantu dalam analisis. Ia adalah sangat mudah untuk webmaster.

Berikut adalah contoh keputusan yang mungkin.

Ia adalah disyorkan untuk menggunakan tips ini kerana kriteria ini akan mempengaruhi hasil carian.