how to remove the margin below a textarea inside a div wrapper (webkit) [duplicate]

Asked 25/10, 2010 at 23:5 Answered 4/2, 2014 at 18:14

 <!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

Nd answered 25/10, 2010 at 23:5 Comment(0)

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.

Interpol answered 25/10, 2010 at 23:18 Comment(2)

If you want to keep the <textarea>'s display style inline, you can also use textarea { vertical-align: bottom; } (or top, or middle; probably pretty much any value other than baseline, which is the default for inline elements). – Hardware 26/10, 2010 at 0:15

Thank god! Very nice. :) – Clegg 10/3, 2011 at 5:50

Setting the display mode to block did the trick for me. Just to clarify, here is the declaration that you need to add to your stylesheet. I would recommend adding it to your reset or normalize stylesheet, in the first place.

textarea {
    display:block
}

Hulsey answered 4/2, 2014 at 18:14 Comment(0)

I usually have a "first line" in every global.css file I make. saying:

<style>    
html,body,p,h1,h2,h3,h4,h5,h6,img,table,td,th 
{
   margin:0;padding:0;border:none;
   font-familiy:"my sites default font";font-size:10px;
}
</style>

After this, I feel that I have full control of the browsers behaviour, when testing on 5 different platforms: Chrome, Firefox, Safari, Opera and ... doh... Microsoft Internet Extracrap..

Then you can easily do something similar for < input > and < textarea > too. if the first line does too much, then just make a second line for the "special cases" alone.

<style>
textarea {margin:0; padding:0; border:none; display:block;}
</style>

Remember that CSS inherits, so you can have multiple declarations of different classes.

Does this remove your problem?

Arrowood answered 26/10, 2010 at 0:0 Comment(1)

I accept the -1 but please do comment who ever you are, so I know what you dont agree upon. It works for me, so I would like to know what I have missed. – Arrowood 9/12, 2010 at 22:9

Recommended topics

Hot tags