Bagaimanakah Saya Boleh Meningkatkan Ruang Antara Teks Bergaris dan Garis Bawah dalam CSS?

Meningkatkan Jurang Garis bawah menggunakan CSS

Mencipta perbezaan visual antara teks dan garis bawahnya adalah penting untuk kebolehbacaan. Walaupun CSS menawarkan sifat text-decoration:underline untuk menambah garis bawah pada teks, ia tidak menyediakan sebarang kaedah langsung untuk melaraskan jurang antara teks dan baris.

Penyelesaian Alternatif

Sebaliknya, pertimbangkan untuk menggunakan sifat bawah sempadan dengan gaya pepejal dan lebar bukan sifar. Ini mewujudkan sempadan di bawah teks, meniru garis bawah dengan berkesan. Selain itu, penggunaan padding-bottom meningkatkan ruang menegak antara teks dan sempadan, mewujudkan ilusi jurang yang lebih besar.

Sebagai contoh, contoh kod berikut menetapkan sempadan hitam 1px di bawah teks dengan padding 3px di bawahnya:

border-bottom: 1px solid #000;
padding-bottom: 3px;

Penyesuaian Warna

Jika anda mahu warna sempadan untuk dipadankan dengan warna teks, tinggalkan sahaja pengisytiharan warna, menghasilkan lebar sempadan bawah: 1px dan gaya bawah sempadan: pepejal.

Pengendalian Teks Berbilang Baris

Untuk teks berbilang baris, bungkusnya dalam elemen rentang yang bersarang di dalam elemen utama. Selepas itu, gunakan sifat sempadan bawah dan pelapik pada elemen span. Teknik ini secara berkesan memanjangkan jurang antara teks dan garis bawah untuk senario berbilang baris.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Meningkatkan Ruang Antara Teks Bergaris dan Garis Bawah dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!