画像の回りにできる不自然な空きについて

質問

画像の回りにできる不自然な空きについて

HP上に設置している画像にリンクをはる作業をしています。
普通その画像をクリックすると、選択状態として画像サイズぴったりに
波線のようなものが表示されると思うのですが、
私の場合、波線が画像の回りぴったりに表示されず・・・・困っています。

クリックした際、上と左右の波線は画像サイズに
ぴったり合った状態に表示されているのですが、
下だけなぜか、波線が画像から少し離れたところまで表示れています。
不自然になぜか空きができています。

これは、paddingやmarginなどが、関係しているのでしょうか？
何が原因なのか分からず、困っています。

回答No.2

ORUKA1951 · ベストアンサー

ブラウザによって実装は異なりますが、画像ではなく<a></a>の内容が枠で囲まれるはずです。
　<a href="./">
　　<img src="./images/a.jpg">
　</a>
とかなってませんか？HTMLの仕様で、タグ間の空白文字が連続する場合は１文字として計算しますから、この場合は、改行コードやタブが空白文字なので、１文字と計算されますから、それが画像の下に現れます。
　<a href="./"><img src="./images/a.jpg"></a>
（・・・いずれも行内要素なので一行で書く方が良い）

お礼

回答ありがとうございます。
改行やタブコードは、文字として計算れてしまうことを
知らなかったので、今後気を付けようと思います。

回答No.1

bloodybell

詳細が分からないのであれですが、恐らくkorokoro--55さんの考えているとおり padding や marginの問題です
とりあえず、タグ中にこんなスタイルシート(css)を記述して試してみて下さい。
<img src="なんちゃら.jpg" style="margin:0px; padding:0px;" />

お礼

回答ありがとうございます。
marginとかは、どうやら関係なかったみたいでした。
文字の位置を一番下に設定したら、
リンクと画像の隙間がうまりました。

a img {
border: none;
vertical-align: text-bottom; /*画像の下の余計な余白をなくす*/
}