奈良県奈良市のホームページ制作・Webマーケティング事務所

TEL

News & Blogお知らせ・ブログ

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

 |  Webサイト制作

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

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

テキストエリア下の余白

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

デベロッパーツール画面

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

参照:HTML – 【HTML,CSS】textarea要素の下部の余白を消したい。|teratail

textarea{
display:block;
}

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

余白が解消される

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

その他にハマりそうなCSS

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

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

input・textareaなどフォームパーツでハマりやすいCSSのまとめ

 

MENU