はい、またまた意味不明なことを書きますよー。
業界の同じ悩みを持つ人の役に立てれば、それでOKです。
ウェブサイトを作るときに、非常に頭を悩ませるのが、
ブラウザ毎の見え方の違いです。
正確に書くと、htmlの解釈の違い、でしょうか。
ブラウザっていうのは、例えばInternetExplorer。
自分がメインで使っているのは、挙動が軽いOpera。
あと、色々カスタマイズが出来るFirefoxなどですね。
MacユーザだとSafari等ありますが、自分はモノクロ画面で
本体と画面が一体になってた頃しか触ったことがないので
申し訳ないけどスルーしてます。
で、です。
前から不思議で仕方なかったんですが、imgタグを用いて
画像を表示させると、画像の下に、謎の空白が出来たり
出来なかったりします。
また、その空白の大きさも、ブラウザ毎にまちまち。
同じ行に文字と画像が混在しているなら、文字との兼ね合いかな？とも
思えるのですが、画像しか表示していない行でも下に空白が出来ます。
一体なんなんだこれ、と。
見つけ方が悪いのか、どの解説書、解説サイトからも対処法を
得ることが出来ません。
気になって、本当に色々試行錯誤しました。
で、得た結論です。
正体はどうも、imgタグの「vertical-align」ではないか、と。
わかり易くするために画像を作ってみました。
デフォルトはbaselineです。
――画像の下の謎の空白の正体、分かりますでしょうか？
あの空白、アルファベットの小文字の下部分、だったようです。
と言うわけで、imgタグの下に出来る謎の空白を消す方法は以下の通り。
スタイルシートに次の一文を付け加えます。
img { vertical-align: top; }
状況に応じて、top→middleに変更する等、使い分けは必要ですよ。
