イメージを正しく含むリンクを取得するにはどうすればよいですか？

フィドル

スクリーンショット

ソース

質問

黒い枠線が画像の下部にのみ現れることに注目してください。私はそれをすべての周りに現れるように修正するにはどうすればいいですか？

私は前にそれをやったことがあるが、私はどのように覚えていない...

 1
追加された
ビュー: 4
源
ro ru fr es pt de zh hi bn ar
うわー...お互いに5秒以内に5つの答え。フィドルはすばらしい小さなツールです。アンカータグの高さは、テキストの高さに基づいています。
追加された 著者 Yzmir Ramirez, 源

5 答え

次のいずれかを使用できます。

a {
    display: inline-block;
}

JS Fiddle demo.

または、

a {
    display: block;
}

JS Fiddle demo.

2つのうち、 inline-block があなたのニーズに適している可能性があります（ a は '当然 display：inline 'なので、Internet Explorer 6と7はうまくいきます。

2
追加された
源
どちらもFFで正しく表示されません。インラインブロックはドットとして示され、ブロックはラインとして黒線を示す。 IEインラインブロックの作品では、画像と下の境界線の間に隙間が残っています。ブロックが隙間を残して、全幅を塗りつぶしています（幅を明示的に設定できるので、それほど悪くないと思います）。
追加された 著者 mpen, 源

これを試して：

HTML

CSS

a {
    border:1px solid black;
    display: block;
    float: left;
}
img
{
   display: block;   
}

Live demo can be found here

It is probably better to edit the border of the tag instead of the

2
追加された
源
それを浮かべることは、画像の下部にあるスペースも取り除く唯一の方法です。
追加された 著者 mpen, 源
@miernik：ああ、素敵な発見！ありがとう。
追加された 著者 mpen, 源
@ニールズ：単にリンクを投稿するのではなく、問題を解決するために必要な実際のコードを投稿し、参照のためのリンクを提供することができます。リンクが壊れてしまった場合、答えは役に立たなくなってしまいます。ありがとう
追加された 著者 codingbadger, 源
ああ、私は将来それをやるでしょう。私はstackoverflowに新しいので、そのことを念頭に置いています。
追加された 著者 Niels, 源
@マーク私は余分なスペースを削除していないが、行の高さを追加していないことがわかった：0; ここで説明されているように、A要素に追加しました。
追加された 著者 miernik, 源

add a display: inline-block to your a

1
追加された
源

Put the border around the image like this: http://jsfiddle.net/nmhAs/

img {
    border:1px solid black;
}
1
追加された
源
問題は単なる国境ではない。私は要素を適切に入れる方法を学びたいと思っていました。
追加された 著者 mpen, 源

あなたのCSSで

display:block;

または

display:inline-block;

あなたの a タグにあります。

1
追加された
源