【CSS】テキストエリアの謎の下余白はdisplay:blockで消せる

divやtableタグ内にtextareaを配置すると若干textareaの部分だけ下に余白ができるという問題。

IE11とクロームで検証したところ、クロームのみに表れる症状で、IE11では確認できませんでした。

デベロッパーツールで確認しても、padding以外に下に余白がある事がわかります。

結論から言うと下記の記事を参考に

textarea{

display:block;

}

を記述してやるとテキストエリアの下余白は解消されました。

その他にも、vertical-align:bottom;でも消えると言ったような記事もありましたが、記事の内容が古かったのか、検証環境の違いか、こちらは効きませんでした。

その他にハマりそうなCSS

テキストエリアの余白以外にも、「フォントファミリー・フォントサイズが効かない」「横幅100%ではみ出る」などのフォームに関するハマりそうなCSSをまとめてみました。

是非、合わせてお読みください。