画像の下の余白をなくす

この記事は2012年5月に公開したものです。ソフトウェアやサービスの仕様が変わり、現在の情報と異なる場合があります。

こんにちは。
SOHOデザイナーを目指しているAquaForest-アクアフォレスト-です。

画像を配置した際に、下に余計な空白ができ、レイアウトが崩れる事があります。
色々調べた結果CSSの仕様だということが分かりました！！

解決方法は簡単で、下記のタグをスタイルシートに追加するだけです。
ブラウザや環境によっても余白がでたりでなかったりとありますが、とりあえずこちらを追加しておけば、問題なさそうです。

img { vertical-align:bottom }

これでレイアウトも揃いきれいに表示されます。