こんにちは、冷え性のともよーんです。
イヤな季節がやってきました...

今回は最近発見したコーディングのバグの解決法をご紹介いたします。

htmlで画像をdivなりpなり要素の中に入れると、変なスキマができることが多々あります。
次の画像をご覧ください。

これはdivにpaddingやmarginを指定せずに画像を入れただけのものです。
わかりやすいようにdivにcssで枠線をつけて、画像を上付きにしています。
隙間の幅は広かったり狭かったり時と場合によって色んなケースがありますが、そちらの違いの原因はまだ究明中です。

よく紹介されるcssでの解決方法はこちら

line-height:1;

これで行間を0にします。
これでかなりの割合で解決しますが、まれにダメな時があります。
特にIE6ではかなり大きな隙間があくことがあって、ハックで対応していました。

しかし、最近になってh2やh3に画像を入れた時の隙間がdivやpなどに入れた時よりも比較的広く、
またブラウザ間での差が大きいことから、
ブラウザのh2タグやh3タグのデフォルトのフォントサイズ解釈が関係しているのではないかと仮定して、
試しに次のcss指定をしてみたところ...

font-size:0;

きれいに隙間がなくなりました！！

やった！効いた！！英語で言うとIt worked!
複数のサイトで試していますが、今のところ全部効いています。

その場その場で取り繕うよりも根本からの解決を！をモットーに日々精進です。