アイコンを入れると行間がくずれる

質問

スタイルシートで行間を広げるように設定しています。
そのテキスト部分の末尾にアイコン画像をつけると、何故かその行間が詰まってしまいます。

---------
ホーム
アルバム■

プロフィール

リンク
---------

↑のようにメニュー部分を作り、■に「NEW」などの小さなアイコンを入れるとその行が上へ詰まってしまいます。
（スタイルシートを適用する前の状態に戻るような感じ）

このアイコン画像が原因であることは明らかなのですが、どうやってこれを解消すればいいのかがわかりません。

ちなみに以下のソースでメニューの項目をを並べています。
<p class="menu">
<a href="○○.html" class="menu">ABOUT</a>
<img src="○○/○○.gif" width="3" height="3" border="0"><br>

アイコンにも同じ行間を適用するにはどのようにすればよいのでしょうか、教えてください。
どうぞ宜しくお願いします。

回答No.1

rubyeye · ベストアンサー

行間を広げるように設定というのが良く判らないのですが……。
スタイルシートにしろHTMLにしろ、line-heightでなんとかなります。
HTMLの方に<p style="line-height: 150%">と入れても動くようでしたら、
・「NEW」のアイコンの影響を受けないところまで広げる。
・「NEW」アイコンを小さいものに変える。
・<img src="○○/○○.gif" width="3" height="3" border="0">のwidth（幅）="3" height（高さ）="3"の数字を小さくする。
横長のものであれば、高さを変えて、比例計算するなりして幅も高さの小さくなり具合に合わせてやる。

これぐらいしかないかなぁと思います。
スタイルシートで言うこと聞かないときは、HTMLソースのタグの中に直接入れてやると、意外と効いたりするときがあります。

お礼

ありがとうございました。
参考にさせていただきます。