▲div（border: 1px solid #000;）の中にtextariaを配置した図。

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"などを使用していたときは問題なかったが、
!DOCTYPE html（HTML5）などを使って、かつ特定のブラウザで表示するとテキストエリアの下に余白ができてしまうことがある。
これを消すにはどうしたらいいかと言う話。

結論を言えば、vertical-align:bottom;を使えばいい。

テキストエリアなどの一部の要素はそのまま表示するとベースラインで表示されてしまう為、
その結果、ボトムマージンを0にしていても下に余白ができている状態になってしまっているのではないかと思われる。

vertical-alignの視覚的イメージ → 【vertical-align－スタイルシートリファレンス】

なお、margin-bottom:-5pxのように気合であわせるという方法も無いことは無いが、
ブラウザごとに処理をかえないといけないのであまりオススメはできない。


また、これを適応しても余白が消えないと言う人は、form自体にマージンがあるとかその辺を調べたほうがいいだろう。

記述ログ一覧 | 記事検索