2011-08-22 7 views
54

テキストエリアのタグの下に余分なスペースがあります。ブラウザごとに1〜4ピクセル。マークアップは非常に簡単です:テキストエリアの余分なスペースは、ブラウザによって異なります

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

は、ここでは、ブラウザでレンダリングされる方法は次のとおりです。

Screenshot

なぜこの出来事はありますか?この余分なスペースを削除するには?

答えて

133

vertical-align: topからtextareaを加算する。

ギャップの理由は、textareainline(またはinline-block)要素であり、ギャップがテキストのdescendersのために予約されているスペースであるためです。なぜブラウザが違うのかが分かりません。

+1

私にそれを打つ、+1! – Kyle

+9

これは100%動作します。あなたは天才です。 – Roman

+3

総天才! –

7

私の場合、thirtydotの回答は親の<div>の下の境界線でうまくいきませんでした。

display: block私にはうってつけです。

関連する問題