Home/ Questions/Q 3303208
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T20:55:59+00:00

<!DOCTYPE html> <html> <head> </head> <body> <div style=background-color:#f09;> <textarea></textarea> </div> </body> </html> Result in

  • 0
 <!DOCTYPE html>
 <html> 
 <head>
 </head>
 <body>
      <div style="background-color:#f09;">
           <textarea></textarea>
      </div>
 </body>
 </html>

Result in Chrome:

removed dead ImageShack link

Result in FF:

removed dead ImageShack link

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try display:block on the textarea:

     <!DOCTYPE html>
 <html> 
 <head>
      <style type="text/css">
           textarea {display:block;}
      </style>
 </head>
 <body>
      <div style="background-color:#f09;">
           <textarea></textarea>
      </div>
 </body>
 </html>

    The issue is that the textarea is inline and it is using the text height to add a bit of extra padding. You can also specify:

     <!DOCTYPE html>
 <html> 
 <head>
 </head>
 <body>
      <div style="background-color:#f09;line-height:0px;font-size:1px;">
           <textarea></textarea>
      </div>
 </body>
 </html>

    Another option which is helpful if you want to keep the textarea inline and don’t want to mess with the parent block’s font properties (I suggest this over the previous method with line-height):

     <!DOCTYPE html>
 <html> 
 <head>
      <style type="text/css">
           textarea {vertical-align:middle;}
      </style>
 </head>
 <body>
      <div style="background-color:#f09;">
           <textarea></textarea>
      </div>
 </body>
 </html>

    Finally, if you’re really worried about consistency between browsers keep in mind margins and other things like that can be defined with different defaults in different browsers. Utilizing something like YUI-Reset can help bring all new browsers to a consistent standard from which you can build.

    • 0