Mengapa Textarea Saya Kelihatan Lebih Tinggi Daripada Elemen Jirannya?

Percanggahan dalam Textarea dan Penjajaran Elemen Jiran: Penjelasan Terperinci

Walaupun kelihatan, elemen textarea dalam coretan kod anda tidak diletakkan di atas daripada jirannya, elemen span. Ilusi visual ini timbul daripada aspek asas reka letak web yang dikenali sebagai penjajaran garis dasar.

Penjajaran Garis Dasar dan Penurunan

Elemen sebaris, seperti rentang dan kawasan teks, dipaparkan pada garis dasar yang sama, iaitu garis yang diletakkan majoriti aksara. Walau bagaimanapun, huruf kecil tertentu, yang dikenali sebagai descenders, memanjang di bawah garis dasar.

Dalam kes anda, kedua-dua elemen span dan textarea menampung potensi descenders dalam pemaparannya. Jurang yang anda perhatikan hanyalah ruang yang dikhaskan untuk turunan ini.

Ilusi Penyelewengan

Salah jajaran yang dirasakan berpunca daripada perbezaan dalam pengendalian sempadan antara elemen span dan textarea. Jidar span membalut teks dan ruang turun, manakala sempadan textarea tidak. Ini mewujudkan ilusi bahawa kawasan teks lebih tinggi.

Penyelesaian Kemungkinan

Untuk menyelesaikan percanggahan visual ini, anda boleh sama ada:

• Tambah jajaran menegak: bawah pada peraturan textarea: Ini menjajarkan tepi bawah textarea dengan tepi bawah rentang.
• Tambah paparan: blok kepada peraturan textarea: Ini mengalih keluar gelagat sebaris dan menganggap kawasan teks sebagai elemen blok, menghapuskan kesan penjajaran garis dasar.

Atas ialah kandungan terperinci Mengapa Textarea Saya Kelihatan Lebih Tinggi Daripada Elemen Jirannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!