画像に作用するline-heightの取り扱いに困っています

Question

HTML/CSSコーディングをしていて、ずっと気になっていたのですが、画像を<p>タグや<h2>タグなどline-heightが設定されているタグ内に入れた時、line-heightの方が高さが大きいと、本来の画像の高さよりも余分に高さが追加されてしまい、marginやpaddingなどをそれを考慮した数値にしなければならないことがあります。

これを回避するために、いちいちline-heightをはみ出さない数値にし直していましたが、他の人はどうしているのかと思い質問しました。
line-heightだけでなく、font-sizeも影響しますよね...

自分はこうしてる、というものがありましたらぜひ教えてください！

Answer 1

画像に余計な余白が入ってしまう時は
その親要素にline-height:0を指定してあげれば余白は消えると思います。
私はこちらで概ね対処しています。

Comments

[mx3]

回答ありがとうございます。
私もそのようにして対応しているのですがaltが見難くなることがあるので、altの内容が重要なものほど迷ってしまいます。

[y_nishizawa]

altが見難くなるのを避けたい理由はSEO的にってことですか?

[mx3]

返信遅くなりすみません。
SEO的にではなく、画像が表示されない場合に、という意味でした。
そういうケースはすごく稀だとは思いますが...。