Bagaimana untuk menetapkan ketinggian baris css

CSS ialah bahasa yang digunakan untuk mentakrifkan gaya halaman web dan boleh mengawal penampilan dan reka letak pelbagai elemen. Antaranya, ketinggian garis merujuk kepada ruang yang diduduki oleh baris teks dalam arah menegak Ia biasanya digunakan bersama-sama dengan saiz fon untuk melaraskan kesan reka letak teks. Dalam artikel ini, kami akan menerangkan cara menetapkan ketinggian baris menggunakan CSS.

1. Tetapkan ketinggian baris menggunakan unit piksel (px)

Menetapkan ketinggian baris menggunakan unit piksel ialah kaedah yang paling biasa dan paling mudah difahami. Anda boleh menetapkan ketinggian garis dengan cara berikut:

p {
  font-size: 16px;
  line-height: 24px; 
}

Dalam contoh ini, font-size ialah 16px dan line-height ialah 24px, yang bermaksud ketinggian baris teks ialah 24 piksel. Tetapan ini sesuai untuk kebanyakan situasi, tetapi perlu diperhatikan bahawa tetapan ini mungkin menunjukkan kesan yang berbeza di bawah saiz fon dan fon yang berbeza.

2. Tetapkan ketinggian baris menggunakan peratusan (%) unit

Menggunakan unit peratusan mungkin lebih fleksibel kerana ia boleh menyesuaikan diri dengan saiz fon yang berbeza. Dalam contoh di bawah, kami menetapkan saiz fon kepada 16px dan ketinggian garisan kepada 150%:

p {
  font-size: 16px;
  line-height: 150%;
}

Ini bermakna ketinggian garisan akan ditetapkan kepada 1.5 kali ganda saiz fon, iaitu 24px. Pendekatan ini memastikan ketinggian baris yang sama untuk setiap saiz fon dan berfungsi pada sebarang skala.

3. Gunakan nilai tolak unit (em) untuk menetapkan ketinggian garisan

Gunakan unit em untuk menetapkan ketinggian garisan berdasarkan saiz fon semasa. Memandangkan unit em ditetapkan relatif kepada saiz fon elemen semasa, teks dengan saiz yang berbeza dijamin mempunyai ketinggian baris yang sama. Contoh di bawah menetapkan line-height kepada 1.5 em:

p {
  font-size: 16px;
  line-height: 1.5em;
}

Dalam kes ini, apabila saiz teks ialah 16px, ketinggian baris ialah 24px. Tetapi apabila anda menukar saiz fon, seperti font-size: 20px;, line-height juga akan berubah dengan sewajarnya.

4. Gunakan nombor tanpa unit untuk menetapkan ketinggian baris

Menggunakan nombor tanpa unit untuk menetapkan ketinggian baris dianggap sebagai kaedah yang paling fleksibel kerana ia boleh menyesuaikan diri dengan mana-mana saiz Font teks. Dalam contoh di bawah, kami menetapkan line-height kepada 1.5:

p {
  font-size: 16px;
  line-height: 1.5;
}

Ini bermakna ketinggian garisan akan menjadi 1.5 kali ganda saiz fon, apabila saiz fon ialah 16px, ketinggian garisan akan menjadi 24px. Menggunakan nilai tanpa unit mungkin merupakan salah satu kaedah reka bentuk yang paling fleksibel dan boleh diselenggara kerana ia boleh digunakan pada kebanyakan situasi.

Ringkasan

Anda boleh menetapkan ketinggian baris dalam CSS menggunakan pelbagai kaedah seperti piksel, peratusan, em unit dan nilai tanpa unit. Setiap kaedah mempunyai kelebihan dan kekurangannya sendiri, dan pilihannya perlu berdasarkan situasi sebenar. Tidak kira kaedah yang digunakan, nilai line-height perlu diubah suai mengikut keperluan reka bentuk untuk mencapai kesan reka letak teks yang lebih baik.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan ketinggian baris css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!