链接标记内的图像 [英] Image inside link tag

问题描述

Hi i am creating a website while placing brand logo inside link tag at top right of web page i encountered this problem

< a href =＃>
< img src ='img.png'>

< / a>

img {
height：50px;
width：50px;
}

<a href="#" > <img src='img.png'> </a> img { height: 50px; width: 50px; }

结果是 标签 即使 标签 中没有文字，包装图片高度实际上是超过50px 。但是，当我给 font-size：0 它Works。

The result is a tag the wrapping image height is actually more than 50px even though there is no text in a tag . But when i give font-size:0 it Works .

所以我需要导致链接的原因标签采取更多的高度。

So I need the reason what causes the link tag to take more height.

请帮我理解这个概念，而不仅仅是一些CSS代码

Please help me understand this concepts rather than just with some css codes

I有样品。请帮助我。

I have sample its . please help me with this .

http：// jsfiddle.net/amerrnath/TLBEx/

好的抱歉，我从链接中得到了答案。

Ok Sorry i got the answer from the link .

锚点标记底部的空白处

谢谢

Thank you

推荐答案

更改 img $ $ block

a {
    display:inline-block;
}
a img {
    display:block;
}

请参阅 jsfiddle

那么它有什么作用？链接中的图像具有 inline-block 的默认显示。你设置为显示：inline-block 。它是两者结合使用 a 元素内的空白符号，可以解决问题。

So what does it do? The image inside the link has a default display of inline-block. The a you set to display:inline-block. It's the combination of the two in combination with whitespace inside the a element, that does the problem.

您可以使用两个嵌套 inline-block div s来模拟，其尺寸只设置在内部尺寸上。 http://jsfiddle.net/TLBEx/4/

You can simulate with two nested inline-block divs which has the dimensions set only on the inner one. http://jsfiddle.net/TLBEx/4/

这篇关于链接标记内的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！