htmlの余分なスペースを取っているタグ

Question

イメージをタグの中に入れました。しかし、私は画像とタグに境界をつけました。余分なスペースを取るAタグ。 'a'タグで余分なスペースを克服するためにimage.howを囲んでいません。私は赤い線でタグを示しています。

私のhtml：

<a href="#"><img src="http://img165.imageshack.us/img165/1043/burnhr6.png"/></a> 

のCss：

img 
{ 
    border:1px solid black; 
} 
a 
{ 
    border:1px solid red; 
} 

http://jsfiddle.net/rEPXY/2/

Answer 1

は、あなたが探しているものを、このようなものですか？

a 
{ 
    border:1px solid red; display:inline-block; line-height:0; 
} 

Answer 2

この画像はあなたのウェブサイト上に配置されようとしている方法に応じて、あなたは<a>と<img>タグを浮動することで、この問題を解決することができます。例えば改訂jsfiddleを参照してください：

HTML：

<a href="#"><img src="http://img165.imageshack.us/img165/1043/burnhr6.png"/></a> 

のCss：あなたは、タグの境界線を持っている理由

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

a { 
    border:1px solid red; 
    float: left; 
} 

www.jsfiddle.net/rEPXY/9

Answer 3

私が理解しない何をすることです。私は、あなたが境界線を追加するときに、タグがブラウザにコンテンツが含まれている要素として解釈されるので、おそらくデフォルトの行の高さを割り当て、タグ内のコンテンツに合わせて幅を調整すると思います。

Answer 4

ライブ例：その改行と一緒に、フォントサイズすると行の高さを接着するために行くようhttp://jsfiddle.net/rEPXY/18/

画像は、インラインとして扱われます。イメージとそのコンテナの性質を変えて、あなたは良いものになるはずです。 <a>タグについては、以下のCSSはinline-blockを使用しているが、あなたはあまりにも<a>タグを浮く場合もwidth財産

でblockにそれを変更することがあり、そのは、他の要素と面倒な位置合わせをなろう。

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

Answer 5

According to this、あなたは次のルールを追加することによって、それを解決することができます：あなたのjsfiddleに私のために働くように見えた

a img {vertical-align:bottom} 

。