ansaurus

Question

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

Answer 1

A:

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>

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.

M2tM 2010-10-25 23:18:40

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).

eyelidlessness 2010-10-26 00:15:48

Answer 2

A:

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

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}

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.

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

BerggreenDK 2010-10-26 00:00:39

ansaurus

tags:

views:

answers:

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

related questions