How to deal with the top distance caused by line-height in CSS?


as mentioned, I created a textarea, to achieve an effect similar to that in figure 1, with the text at a distance of 6 from the top horizontal line.
but line-height caused the distance between the text of textarea and the top, so I had to set padding-top to 2.
but when there are too many words, the drop-down looks like figure 2 again, which is very ugly.

is there any way to make the distance between the text and the top 0 after line-height setting?
so I can use padding to handle margins. Thank you very much!

Sep.24,2021

I tried, and it won't happen as you said. padding will scroll along with the content, so there will be no white bar occlusion at the top.

I guess whether you have tag nesting and whether padding is set on the outer element.

   

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3a819-2c236.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b3a819-2c236.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?