Mengapa Textarea Saya Kelihatan Lebih Tinggi Daripada Rentang Adik Beradiknya?

Salah Jajaran dalam Peletakan Kawasan Teks

Dalam coretan kod yang diberikan, nampaknya elemen textarea diletakkan lebih tinggi daripada elemen span saudaranya. Walau bagaimanapun, pemerhatian ini tidak betul.

Penjelasan

Secara lalai, elemen seperti rentang dan kawasan teks dikelaskan sebagai elemen sebaris. Penyemak imbas memperuntukkan ruang di bawah elemen sebaris untuk memuatkan turunan, iaitu huruf kecil yang memanjang di bawah garis dasar.

Penjajaran Garis Dasar

Setiap baris teks mempunyai garis dasar khayalan, di mana kebanyakan huruf terletak. Walau bagaimanapun, beberapa huruf, yang dikenali sebagai turunan, seperti "y", "j", "p" dan "g", memanjang di bawah garis dasar ini.

Gelagat Elemen Sebaris

Unsur sebaris laraskan penjajaran menegak mereka untuk mengambil kira kemungkinan penurunan. Walaupun elemen seperti textarea tidak mengandungi sebarang descenders, penyemak imbas masih memperuntukkan ruang untuknya.

Ilusi Visual

Sempadan merah di sekeliling textarea mencipta kesan salah jajaran kerana ia hanya melampirkan teks yang kelihatan, tidak termasuk ruang menurun. Sebaliknya, sempadan biru di sekeliling elemen span termasuk kedua-dua teks dan ruang menurun.

Penyelesaian

Untuk menyelesaikan kesan visual ini, pertimbangkan salah satu daripada pilihan berikut:

1. Tambah penjajaran menegak: bawah pada peraturan textarea untuk menjajarkan kandungannya dengan bahagian bawah elemen span.
2. Tambah paparan: blok pada peraturan textarea untuk mengubahnya menjadi elemen peringkat blok dan keluarkan ruang penurunan yang berpotensi.

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