Mengapa TextArea Saya Kelihatan Lebih Tinggi Daripada Rentang Jirannya?

Mengapa TextArea Saya Lebih Tinggi Daripada Jirannya?

Walaupun nampaknya elemen textarea terletak lebih tinggi daripada elemen rentang jirannya , ini sebenarnya tidak berlaku.

Baseline Penjajaran

Kedua-dua elemen span dan textarea ialah elemen sebaris. Penyemak imbas menyediakan ruang di bawah elemen sebaris untuk memuatkan turunan, iaitu huruf kecil yang memanjang di bawah garis dasar. Jarak ini memastikan bahawa semua elemen pada baris yang sama sejajar pada garis dasarnya.

Fungsi TextArea

Elemen TextArea biasanya tidak memerlukan ruang untuk descenders kerana ia terdiri daripada kotak pembalut. Walau bagaimanapun, penyemak imbas masih menyediakan ruang ini untuk membenarkan kemungkinan teks atau elemen bersebelahan berkongsi baris yang sama.

Ilusi Visual

Ilusi salah jajaran dalam contoh yang disediakan diburukkan lagi oleh sempadan di sekeliling unsur-unsur. Sempadan merah di sekeliling textarea mengecualikan ruang menurun, manakala sempadan biru di sekeliling elemen span merangkumi kedua-dua ruang teks dan menurun. Mengalih keluar sempadan merah mengurangkan ketidakselarasan yang dilihat.

Penyelesaian

Untuk membetulkan ketidakselarasan yang dilihat, anda boleh memilih salah satu daripada penyelesaian berikut:

1. Tambah jajaran menegak: bawah pada peraturan CSS textarea, yang akan menjajarkan textarea ke bawah daripada bekasnya.
2. Tambah paparan: blok pada peraturan CSS kawasan teks, yang akan menukarnya menjadi elemen blok dengan ketinggian penuh.

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