Pengaturan dalam CSS: spasi baris

Dalam CSS, jarak antara garis-garis ini sangat mudah untuk mengatur. Untuk tujuan ini ada properti khusus. Tapi, tentu saja, ada banyak parameter lainnya, yang universal dan dapat diterapkan untuk teks.

Jika tidak ada penyesuaian dilakukan, Anda diatur ke nilai default. Anda dapat mengubah jarak jika diinginkan. Nilai dapat berupa persentase atau piksel.

baris Tinggi

CSS jarak antara garis dapat ditunjukkan oleh angka berikut.

Pada gambar di atas menunjukkan parameter dengan jarak yang sesuai. teks dalam ruang font-size. Perhatikan bahwa garis teks tidak mulai dari dasar dan sedikit lebih tinggi. Tempat yang disediakan di bawah ini untuk huruf yang memiliki unsur-unsur bawah (g, y, dan sebagainya).

Perhatikan bahwa ruang antara blok font-size yang disebut terkemuka. Dengan HTML dan CSS properti ini tidak muncul, tetapi dalam editor grafis dan teks lainnya. Misalnya, dalam Adobe Photoshop.

Gambar di atas menunjukkan di mana di "Photoshop", Anda dapat menentukan terkemuka. Dan selanjutnya ditentukan font-size pengaturan.

Contoh menggunakan line-height

Dalam CSS, jarak antara garis dapat diatur persen. Sebuah contoh ilustratif diberikan di bawah ini.

Dalam kasus nilai-nilai kecil dari pengguna situs Anda akan nyaman untuk membaca.

Jarak dapat bervariasi dan ukuran font. Jika perbedaan antara parameter dasar akan sangat berbeda dalam angka, perbedaan dikompensasi oleh kenaikan terkemuka.

seluk-beluk desain

CSS jarak antara garis dapat lebih lanjut menyesuaikan berbagai indentasi. Perhatikan contoh pada gambar.

Dalam "Element" dalam hal ini akan menjadi teks. Padding - padding di dalam objek, dan margin - lekukan objek. Perbatasan - frame ini. Hal ini dapat 0 piksel, dan mungkin 100.

Gambar berikut segera menunjukkan semua margin, frame dan tinggi baris teks.

Jika Anda memiliki teks kecil, semua dalam satu baris, atau setiap baris dalam sebuah paragraf terpisah, jarak dapat disesuaikan antara paragraf menjorok. Yang maring dan padding antara baris dalam satu sel tidak akan berpengaruh. Mereka menciptakan lekukan-satunya di tepi objek. Object - seluruh ayat ini, bukan garis di dalamnya. Hal ini penting untuk tidak bingung.

Dalam kasus di mana sejumlah besar baris, yang semuanya terletak di objek yang sama, font dianjurkan untuk mengubah parameter dasar.

Bagaimana meningkatkan jarak antara baris CSS

Jarak antara baris HTML, Anda dapat mendaftar untuk kelas atau untuk semua paragraf dalam teks. Jika Anda menentukan seperti ini: p {line-height: 20px; } - kemudian benar-benar semua paragraf pada halaman akan string dari 20 piksel. Jika Anda ingin di tempat yang berbeda dalam berbagai ukuran, dianjurkan untuk melakukan sebagai berikut.

Kami meresepkan gaya.

.class1 {line-height: 20px; }

.class2 {line-height: 16px; }

.class3 {line-height: 12px; }

Untuk kejelasan, kami menambahkan bingkai, sehingga Anda dapat melihat bahwa ia bekerja. Di masa depan, itu harus dihapus.

Berikutnya, kita menggunakan kelas-kelas ini. Hasilnya adalah sebagai berikut.

Perhatikan bahwa dalam kasus ketiga, band melaju ke teks. Semua karena fakta bahwa ukuran font lebih besar dari ketinggian garis. Oleh karena itu, penting untuk memastikan bahwa konflik seperti itu tidak. Jika Anda melakukan ketinggian garis kecil, masing-masing, mengurangi font.

Hal ini tidak dianjurkan untuk melakukan terlalu sedikit teks dan jarak kecil antara garis. Karena tidak ada pengguna tidak akan dapat membaca semuanya dengan tenang. Dia mata cepat lelah. Search engine juga mengatakan bahwa teks adalah user-friendly.

Selain itu, dalam beberapa tahun terakhir ada penekanan kuat pada kegunaan bagi pengguna ponsel. rekomendasi ada selalu mengatakan bahwa ukuran font harus normal, tidak kecil. Terutama sangat mempengaruhi referensi. Dengan ukurannya yang kecil pengguna akan sulit untuk menggunakan navigasi situs.

Di mesin pencari "Google" adalah alat khusus yang membantu dalam analisis. Hal ini sangat nyaman untuk webmaster.

Berikut adalah contoh hasil yang mungkin.

Disarankan untuk menggunakan tips ini karena kriteria ini mempengaruhi hasil pencarian.