divの中に高さの低い画像を入れるとできる空白

HTML3のときのクセで、テーブルの中にフッター用の画像を入れる要領で、divのなかにimgを入れたら妙な隙間が・・・。

どうやら、divにimgを入れると、imgはテキストと同列なので、imgにfont-sizeが発動・・・ということは付随してline-heightも適用され、そのサイズよりも高さのない画像を使っていると、妙な隙間がでることになります。

つまり「line-height > imgの高さ」のときに、隙間がでるようになります。

そこのdivだけline-heightを0にしたりという方法もありますが、divのbackground-imageに画像を適用して、divの幅と高さを画像のサイズに合わせるほうがスマートかもしれません。

  • このエントリーをはてなブックマークに追加

水蕗をフォローする