リセットcssで img { vertical-align:top; font-size:0; line-height:0; } と記述しているのを見つけたのですが、font-size:0; line-height:0; って必要ですか？縦に並べた時の余白は vertical-align:top; だけで消せると思うのですが？
お、よく見つけたね！おめでとう！やるじゃん！
は？
上下中央にしたいときってあるでしょ。 vertical-align:middleね。このときに画像の下に無駄な余白ができて、中央より少し上よりになっちゃうのよ。それを防ぐためのfont-size:0とline-height:0ね。
ご丁寧に説明いただきありがとうございます。ただ、試してみましたが、img要素に vertical-align:top; の指定のみで余白は出ない気がします。img要素が vertical-align: baseline; の時で、親要素にfont-size:0とline-height:0を指定して余白を消すというテクニックはあると思うのですが。。
リセットcssの話ですよね？middleにすると実際に余白出る場合があるので、そういうのも想定して、font-sizeとlineheight0にしてるのかと思います。
なるほど、余白が出る場合もあるのですね。。ありがとうございます。
みんなの回答 2 件
お、よく見つけたね！おめでとう！やるじゃん！
上下中央にしたいときってあるでしょ。 vertical-align:middleね。このときに画像の下に無駄な余白ができて、中央より少し上よりになっちゃうのよ。それを防ぐためのfont-size:0とline-height:0ね。
関連するトピックス