img要素のline-height

2014年4月10日
カテゴリ：備忘録(WEB)

img要素とimg要素を上下に並べていったときに

marginもpaddingも0なのに隙間があいてしまう。ブラウザによっても表示が変わる・・・
tableのtdの中にimgを入れるとしたに隙間ができてしまう。

これらの原因はimgがインライン要素なので、画像の一番下がbaselineに配置されてしまい、bottomまでの余白が隙間になって表示されてしまいます。

囲っている要素(例えばliなど)にheight指定することでも改善しますが、tdには効かなかったりするので、改善策の一つとして、imgに「vertical-align:bottom;」を設定すること。

これで、改善できないような状況の場合は、インライン要素だから問題が発生しているので、「display:block;」でそのimgをブロック要素にしてしまう。

この記事のトラックバック用URL