Menu
There`s some extra space under textarea tag. From 1 to 4 pixels in different browsers. The markup is very simple:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <style> body { margin: 0; padding: 0; } .main { background-color: red; } textarea { background-color: gray; resize: none; margin: 0; border: 0 none; padding: 10px; height: 50px; overflow: hidden; } </style> </head> <body> <div class="main"> <textarea></textarea> </div> </body> </html> Here's how it is rendered in browsers:
Why is this happening? How to remove this extra space?
205
Just put your php open tag right after the textarea close tag.. Dont use line break.. And close php exactly before (as you have done).. This will erase all the whitespaces..
Just use non-breakable spaces: instead of regular spaces.
Try textarea {max-width:95%;} - it will always fit your display.
The main attributes of <Textarea> are: Name – Used to define name to the control. Rows – Specifies the number of rows in the text area control. Cols – Specifies the number of columns in the text area, (number of characters in a line)
Add vertical-align: top to textarea.
The reason for the gap is that textarea is an inline (or inline-block) element, and the gap is the space reserved for descenders in text. I don't know exactly why the gap is different between different browsers.
195
In my case, thirtydot's answer didn't work well with the parent <div>'s bottom border.
display: block suited me nicely though.
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
